[Nick MParticipant]

Hello,

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

[ZeshanMember]

Hi 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!

[Nick MParticipant]

Hello,

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

Thanks,

Nick

[Nick MParticipant]

This is what we are shooting for http://www.brewwindsor.com/ without the parrallax

[ChristopherModerator]

Hi there,

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.

[Nick MParticipant]

It’s working however, the overlay is behind the background image (class=”backstretch”) – we need to adjust the z-index so that way the overlay will appear on top of the background and below the text.

Thanks

[RadModerator]

Hi Nick,

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!

[Nick MParticipant]

This did not work, not able to see the overlay on top of the backstretch.

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

Nick

[Paul RModerator]

Hi 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 MParticipant]

It worked! Thanks again for your help.

Nick

[ZeshanMember]

You’re welcome! 🙂

[injeqtParticipant]

How do I “repeat” my background image (like the one below) across the entire width of the screen, but then stretch the image vertically to fit the entire height of the page no matter how large or small the page is?

http://americanliberty.us/wp-content/uploads/2015/02/bg.gif

Site: http://americanliberty.us

Thanks.

– Hugh

[ThaiModerator]

Hi @injeqt,
Thank for writing in.
Try adding following CSS under Appearance > Customize > Custom > CSS:

.backstretch {
background: url(http://americanliberty.us/wp-content/uploads/2015/02/bg.gif) repeat-x;
background-size: auto 100%;
}
.backstretch img {
display: none;
}

Hope it helps.

[Author]

Posts