Static background images when scrolling (parallax-related?)

[dellagrotta]

Hi, I’m trying to have sections containing fixed background images where the sections below them would scroll over while the prior section remains fixed.

I understand this might have to do with parallax, but I want certain background images to remain completely still as the content below it scrolls over as I’m moving down the page. What happens now is a subtle movement as I’m scrolling over certain parallax sections.

Here’s a site that has what I’m trying to achieve: https://www.bethel.com/ (notice the complete static images that don’t move.

Here’s a page to my site that I populated with alternating images set to parallax and sections with text: http://dev.growsmartri.org/?page_id=278

1. Essentially, I’m trying to have the images remain static as the text sections scroll over them similar to the sample site.

2. Can I have control over which sections have this effect, versus having it happen throughout the entire site? I’d like to have this capability.

[ruenel]

Hello There,

Thanks for writing in and for the very detailed post information.

1.) Please edit your page back in Cornerstone and disable the parallax option. The image will now become static but it will scroll together with the page. What you want is to have the background image remain in fixed position and to do that, please the customize tab in the section settings and insert an inline css background-attachment: fixed;.

2.) You may apply the inline css only to those sections you want to have the effect. If you want it globally, then it should be added as a global custom css in X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-section {
  background-attachment: fixed;
}

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

[dellagrotta]

Hi thank you very much. I’ve done everything you suggested, but unfortunately It’s still not working. Any further thoughts?

[ruenel]

Hello There,

Could you please provide us access to your site so we can take a closer look at your page? It is current under construction mode and we could not check the page.

Thank you in advance.

[dellagrotta]

Hi.

What would be great is if you can show me how to do the effect found on this page (as you scroll towards the middle of the page, where the photo is static): http://www.espn.com/espn/feature/story/_/page/enterpriseSalts/ezekiel-elliott-clay-matthews-just-the-nfl-smelling-salt-users

I set up a dummy page including text and photo where you can try it out. The page is called “Parallax Test”.

It would be appreciated if you can do it, and provide me with instructions/details. Thank you!

[Joao]

Hi There,

I went to your Parallax Test Page:

1- First thing I noticed you had the default template selected for your page.

So I click on Cornerstone Settings (Fourth Icon from top to bottom on the very left Cornerstone tab)

On Page Template: I Selected Blank no Container Header Footer.

Save it.

2- On your page, I clicked on the section which you had a background image.

I noticed you added a Background Image on your Lower Layer.

So on Background Parallax I ticked the box: Lower Layer and add 220% Zoom to adjust the intensity of the Parallax. In order that the effect looks good, I recommend you use an image with more height with more sky and land above and below the palace.

Hope it helps