Fixed Section Background Image

[whitemedia]

Hi,

I am trying to use a background image for a section on my homepage. However, I would like the image to remain fixed with the text and next section on the page scrolling up over it as the user scrolls down the page. I have found various solutions in the forum, but they seem to deal with a page background image only. I want to try and replicate this if possible.

Thanks,
Christopher

[ruenel]

Hello Christopher,

Thanks for a very detailed post information. To resolve your issue, you will need to edit the page and insert a custom inline css element that will make the background attachment as fixed. You can find the inline element css in the “Customize” tab of the section settings:

$el .x-bg .x-bg-layer-lower-image{
    background-attachment: fixed;
}

We would love to know if this has worked for you. Thank you.

[whitemedia]

Thanks Rue,

That worked perfectly!

Kind regards,
Christopher

[whitemedia]

Hi again,

As previously mentioned, the solution works great on desktop and larger screen sizes. However, something weird is happening on mobile screens. Using Pro’s screen preview tool, the mobile view of section with the images looks fine.

However, when looking at the same page and section on an actual mobile device, the background image seems to be super-zoomed in so that the image is unrecognisable. Is there a setting to manage this, or is it normal behaviour? An example of this behaviour is the bottom section of the homepage immediately above the blue footer section.

I also see that the fixed image does not work on a mobile device and that the image and text all scroll together. Again, is this normal?

Thanks,
Christopher

[ruenel]

Hello Christopher,

The code given should apply to both desktop and mobile screens. You might need to clear the mobile phone’s browser cache and test your site again.

Meanwhile, the background image looks like being zoomed in smaller screens because it tries to cover the whole section area. Please keep in mind that background images depend on the total height of the section which also depends on the total height of the elements insert the columns. The height of the section doubles up in smaller screens because the columns collapse and stack below each other. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

Hope this helps.