I’m trying to add a css background overlay on top of the backstretch class (background image) – I have found recent article stating that to do so I should use the body .site class and add my background there. However, with infinity when I do this using a left navbar menu it will only fill the right hand side body content
Screenshot:
https://www.dropbox.com/s/rzihdm8g6nc5w7x/Screenshot%202014-11-27%2001.52.43.png?dl=0

I was able to manipulate the background so that it stretches the entire screen using:
body .site {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: url(/wp-content/themes/x-child-integrity-dark/images/background-image-overlay.png) repeat;
}

However, when I do this it will not let me scroll to additional content below the fold.

My ideal solution would be to figure out how to add a class above .backstretch background so that it will just have an overlay on top of the image which fills the entire viewport.

Thanks,

Nick

Thanks for posting in!

Yes, your CSS will fix the .site and won’t let you scroll the rest of the content. However to assist you with this, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks!

The site can be found at http://dev.brewwindsor.com.

Thanks,

Nick

Please try this code:

body {
background: url(/wp-content/themes/x-child-integrity-dark/images/background-image-overlay.png);
top: 0;
width: 100%;
right: 0;
left: 0;
height: 100%;
position: fixed;
}

Hope that helps.

Thanks

Thanks for posting in.

How about this one,

.backstretch:after {
content: url(/wp-content/themes/x-child-integrity-dark/images/background-image-overlay.png);
top: 0;
right: 0;
left: 0;
height: 100%;
width: 100%;
position: fixed;
z-index: 999;
}

Change your z-index accordingly. Cheers!

The z-index of the .backstretch is z-index: -999999

Nick

Can you try this instead.

Add the code below in your child theme functions.php

function my_custom_footer_output() {
  ?>
       <div id="supersized_overlay"></div>
  <?php
}

add_action( 'wp_footer', 'my_custom_footer_output', 99999 );

Then add this under Custom > CSS in the Customizer.

#supersized_overlay {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
z-index: -999998;
height: 100%;
width: 100%;
background: transparent url('http://dev.brewwindsor.com/wp-content/themes/x-child-integrity-dark/images/background-image-overlay.png') repeat;
}

Hope that helps. 🙂

Nick