Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • July 11, 2020 at 1:37 am #1229508
    ronduring

    What would be the best way to have a background image overlay that would been seen within the header and body of the site?

    July 11, 2020 at 6:17 pm #1229678
    Victoria

    Hey ronduring,

    On this site the body and the header have the images as the background.

    This is the code used:

    
.skewoverlay {
    position: absolute;
    top: 0;
    display: none;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    opacity: 0;
    display: block;
    background: url(../img/skew-bg.jpg) no-repeat center top #f4f4f4;
}

    Best regards,
    Victoria

    July 11, 2020 at 8:06 pm #1229704
    ronduring

    Thanks. I did see that same code you found, but I tried a few spots to insert it within Enfold, but it didn’t work or look the same. Where would this code need to be insert within Enfold? Would a child theme be needed?

    July 13, 2020 at 6:27 pm #1230031
    Victoria

    Hi ronduring,

    What is the image that you want to use? Please share the link.

    Best regards,
    Victoria

    July 13, 2020 at 8:11 pm #1230094
    ronduring
    This reply has been marked as private.
    July 14, 2020 at 6:29 pm #1230369
    Victoria

    Hi ronduring,

    I cannot get it to display. I’ll ask my colleagues to have a look.

    Best regards,
    Victoria

    July 16, 2020 at 1:49 pm #1230917
    Yigit

    Hey,

    Please add Color Section element to the top of your page and set skew-bg image as background color.
    Then choose to display transparent header on your page and add following code to Quick CSS in Enfold theme options > General Styling 

    #top .av_header_transparency .header_bg {
bacground-color: rgba(26, 43, 100, 0.8);
}

    Regards,
    Yigit

    July 17, 2020 at 3:18 pm #1231300
    ronduring

    Thanks. I updated 2 pages on the site doing that, but I lost the header. See example.

    July 24, 2020 at 5:28 am #1232861
    Ismael

    Hi,

    Thank you for the inquiry.

    Looks like they created a new container or element called skewoverlay and applied the skewed background to it.

    <span class="skewoverlay animated fadeIn delay-two" style="width: 1596.22px; height: 1896px;"></span>

    CSS: 

    .skewoverlay {
    position: absolute;
    top: 0;
    display: none;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    opacity: 0;
    display: block;
    background: url(../img/skew-bg.jpg) no-repeat center top #f4f4f4;
}

    If you want to replicate it in an Enfold installation, you might have to insert the element directly in the header.php file.

    They also applied a skewed background to the header container.

    .header.bg .header-overlay {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	left: 0;
	display: block;
	background: url(../img/header-overlay-bg.png) no-repeat center top;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.