Fixed fullscreen background hero image

[scottvarga]

I am using the Pro Theme.

I am looking to create what you have here (second image down “my work”) but fullscreen at the top of page. I am using the customize section to add the following css: min-height: 100vh;

http://demo.theme.co/ethos-2/

here is my page http://www.scottvarga.com/haptx/

I have done several things per the forum suggestions but nothing really work:

1. Enable the parallax effect for lower image and increase the size to 200-300. The problem here is that it zooms my image and I don’t want that. Plus, when I scroll it is jittery and looks bad. Your example is not jittery.

2. I have tried adding this css to the customize css field: background-attachment: fixed;
   This does nothing.

Please help.

Thanks

[ruenel]

Hello There,

Thanks for writing in!

1.) The background image will always try to cover the whole area. It will zoom in or zoom out depending on how big is the area relative to the image. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

2.) Your code should have work. I have inspected the page and it turns out that your code will only work in screen size less than 980px. You might need to update it and use this instead so that it will work in bigger screens:

@media ( min-width: 980px ) {
 [class^="x-bg"][data-x-params*="parallax"] {
    background-attachment: initial;
    transform: none !important;
 }
}

Hope this helps. Please let us know how it goes.

[scottvarga]

I dont have an issue getting the background to cover the entire screen. That works fine. What I need is to get the background to be fixed as the lower sections scroll over it without the background moving. Similar to the second image on your page here

http://demo.theme.co/ethos-2/

[ruenel]

Hello There,

Sorry if the code is not working. I was focused on the @media block.

This should work:

@media ( min-width: 980px ) {
 [class^="x-bg"][data-x-params^="parallax"] {
    background-attachment: fixed;
    transform: none !important;
 }
}

Or simply this:

 [class^="x-bg"]{
    background-attachment: fixed;
    transform: none !important;
 }

Please let us know how it goes.

[scottvarga]

That worked perfectly!!!

Thank you so much!

[ruenel]

You are most welcome!