Fixed background images

[ladybirdenterprises]

Hi there,

I’m trying to fix a background image so that the content above and below it scrolls over it. Not parallax or the image moving with the rest of the content of the site, sort of like it sits behind the site and appears as you scroll. There’s a video here that shows you what I’m talking about: https://www.youtube.com/watch?v=K63SGeY3I_w

The site and page I’m trying to get it working on is here: https://www.sageaccountssolutions.co.uk/sage-software-and-stationery

There is an image divider above the section called ‘Sage Payroll Stationery’ and one above ‘Sage Accounts Stationery’. I’d like those to stay fixed in the background with the content moving as you scroll.

Any advice would be much appreciated.

Thanks

Ant

[thai]

Hi There,

You have to check on the advanced option of your section’s background image then enable the paralax option:

Hope it helps

[ladybirdenterprises]

Thanks for the swift response Thai, but if I do that the image in the background still moves a little bit when you scroll up and down. I don’t want it to move at all, just like in the video I linked to.

Any further thoughts?

Cheers,

Ant

[ruenel]

Hello There,

To resolve your issue, please insert a background image in a section or column. To make it fixed, you will need a custom css. Please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

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

We would loved to know if this has work for you. Thank you.

[SatchMoney]

How do you apply this style without it affecting every section with a background image on the page?

[Joao]

Hi There,

You can click on the customize tab of the section and add an ID name, lets say: fixed-bg

And you can update the coded provided by Rue to:

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

Hope it helps