Fixed Background Affects Entire Site

[capodanno]

I am trying to use the fixed background effect on only the clouds in section 2 of my home page.

In section 2>Customize>Setup I have added an ID of fixed-bg

I have added this code to my Appearance>Customize>Additional CSS: (I have also tried adding this code instead inside the Section 2>Customize>Element CSS but got the same results.)

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

Unfortunately, this is changing all background images on the page (and throughout the site) instead of just the one in this section. For example, the photo of the turbine behind the contact info is also scrolling, even though it’s in another section. What am I doing wrong?

A bit more about Section 2:
In an ideal world, the clouds would only be fixed and not the images inside the flipping cards. That may not be possible, since they are in the same section as the effect I’m trying to produce for the background?

[capodanno]

Here’s the correct Custom CSS I entered. (This post converted my hashtag to format some bold text.) Here’s the actual code I used:

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

[jade]

Hello @capodanno,

If you want the code to only work on the homepage. please update the code to:

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

Wordpress adds the class home to the body tag of the homepage so you can use that class to target the homepage specifically.

Hope this helps.

[capodanno]

So it can’t be applied to only one section, instead of the whole page?

[ruenel]

Hello @capodanno,

This code will be applied to the section only for your homepage only.

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

Only the section with background image that has been added in the lower layer or the section with the fixed-bg ID. Thus this code is a specific css for the homepage and for the section 2 of the homepage only.

Hope this explains it briefly.

[capodanno]

Thank you for this reply. But you can see the background is still fixed on Section 4 as well. That section does not have the fixed-bg ID.

[ruenel]

Hello @capodanno,

The .home .x-bg .x-bg-layer-lower-image is affecting the section 4. If you only want to have a fixed background in the section that has the fixed-bg ID, then you update the code into:

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

Hope this explains it briefly.