Fixed Background Image CSS Affects Whole Site

I am working on a clients Pro website and having trouble trying to make a section background image stay fixed while scrolling down the page. I am using the code below to achieve this as in a previous topic (https://theme.co/apex/forum/t/fixed-background-images/23594), but when I apply the css to the global section it affects the whole site without letting me assign the ID name to the sections I want the effect on. Any thoughts why this happens?

#fixed-bg.x-section.bg-image,
.x-bg .x-bg-layer-lower-image,
.x-bg .x-bg-layer-upper-image {
background-attachment: fixed;
}

Hello @FenBalancing,

Thanks for writing in!

To resolve this, you can do it in two ways.

1.) Please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

#fixed-bg.x-section.bg-image,
.x-bg .x-bg-layer-lower-image,
.x-bg .x-bg-layer-upper-image {
  background-attachment: fixed;
}

2.) Or simply update the code and use this instead:

.page-id-135 #fixed-bg.x-section.bg-image,
.page-id-135 .x-bg .x-bg-layer-lower-image,
.page-id-135 .x-bg .x-bg-layer-upper-image {
  background-attachment: fixed;
}

where page-id-{n} is the default page class with ID in it. To find the ID of the page, please check this out: https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

Hope this helps.

I chose the second option but that only singles out the page as a whole. The page has multiple background images on it and they all get the same fixed image effect in each section or column. Can it be used to make the effect happen in only a single section on the page?

Thanks.

Hello @FenBalancing,

If that is the case, you will need to edit your page back in Cornerstone. Click the section settings, find the Customize tab and add a section ID my-section and then you can add a custom css like in the first option I gave like this:

#my-section.x-section.bg-image,
#my-section .x-bg .x-bg-layer-lower-image,
#my-section .x-bg .x-bg-layer-upper-image {
  background-attachment: fixed;
}

Hope this helps.

That is wonderful! Thank you for all the help!

You’re welcome!
Thanks for letting us know that it has worked for you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.