I'm confused on simple parallax effect

I’m using X Pro and I basically want to create some sections that work just like the ethos 2 theme:

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

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

and it works, but it’s making every section with a bg image that way instead of just the ones I have added the class bg-image to.

Hi there,

You do not need to add the CSS code. Instead, go to the Section in question and enable the Parallax functionality from the Section options:

Just check the advanced box of the background to see the Parallax options.

Thank you.

No, this doesn’t allow you to have a fixed background with text moving over it.

Hello there,

I think you forgot to add the background image:

To achieve the look you want, you can add the elements. Image for the Icon, Headline for the Heading and Text for the excerpt.

Then go to Customize tab of the section and add an ID name. E.g. fixed-bg-01, fixed-bg-02
Please don’t forget to change the ID name of each section to your choice.

Afterwards, please add the following CSS code in the X > Launch > Theme Options > Global CSS.

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

Just duplicate and change the ID names on the code if you have more images.

Hope it helps.

That does the same thing that the code I used above does - it’s great, but it applies it to every section with a background image even if they don’t have to class assigned in custom. I just want it to be applied to sections I have assigned the class to - like fixed-bg-01. I should be able to have one class like fixed-bg and every section I assign that same class to would apply that effect, right?

Also, this code makes the text move over the top of other sections when you scroll down.

Hi There,

Let’s make this simple, the parallax effect that we’re seeing on Ethos 2 demo is not via custom CSS, but the parallax option you have on the Section’s background. It just has a nice scrolling effect, because 1) it is using the appropriate image size (1400px by 933px) and 2) its sections has the appropriate top and bottom padding (18.5%).

But if you really need to go on the custom CSS path, you can update your CSS code to this:

.my-custom-parallax {
    background-attachment: fixed !important;
}

Then apply the CLASS my-custom-parallax to your section.


Hope that shed some lights,
Cheers!

I guess I should restate - I love the effect of the still background with the text scrolling over it, and Jumar’s css above works perfectly, but it applies the effect to every section with a background image whether that class is specified in the custom area of a section or not. How do we make it apply that CSS effect to ONLY the sections that call that class?

If I put fixed-bg-01 in the customize class of the section, or if I don’t it’s still applied?

Hello there,

Please follow my colleague’s steps above as it’s the simplest and correct way to do it.

Then instead of my-custom-parallax class, you can replace it with any class. E.g. fixed-bg-01.

.fixed-bg-01 {
    background-attachment: fixed !important;
}

Also replace the class to your section. Please be reminded you may still need to add the headline, image and text elements to achieve the looks of the slider.

Hope it helps.

Thank you guys! In order to get the effect I was actually after, and I should have been more clear, was the text floating over the stationary images. I used this code and it’s perfect:

.fixed-bg .x-bg .x-bg-layer-lower-image {
background-attachment: fixed !important;
}

Adding fixed-bg class to the section with a 1920x1080 image with 25% top and bottom padding.

Glad you sorted things out, we are delighted to assist you with this.

Cheers!

Not quite sorted unfortunately. Using the parallax instructions above don’t work (parallax with image sized and 18.5% top and bottom margins - this just creates the same old parallax effect, doesn’t give the effect of the words scrolling over the image. I used the CSS fix and it looks great - except when viewed on mobile and it’s zoomed in so tight on the image it looks like a mess. Is there a way to tell the css version to have the background fixed but the size adjusted on devices?

Hello there,

Please add a text element in your section to achieve the looks.

Setting your background image to fix keeps the image in place so long as the element is tall enough for scrolling. Usually the background automatically resizes on mobile, and will be cropped on a certain mobile size as it gets smaller.

If this still doesn’t help, can we ask for the following details in a Secure Note:

  • URL of your website
  • WordPress admin username/password

Thank you.

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