Streaming live at 10am (PST)

Fixed positioning of background image not working


#1

I’m trying to fix the background image of ‘Section 1’ to no avail… Have no clue why it’s not working.

What is strange is that it works as expected in PREVIEW mode, but when I publish
here http://almasearch.webflow.io/, fixed positioning seems to no longer be activated.

Very confusing…

Thanks very very much for your help in advance!


Here is my site Read-Only: https://preview.webflow.com/preview/almasearch?preview=4f9963a2ffd5b82f05b5c6302a40e645


#2

The backgrounds seem to be fixed when I visit your published url.


#3

Thanks for your prompt reply, Vincent…

I’m even MORE confused now! :stuck_out_tongue:

This is really bizarre. If you visit my read-only link here and go into preview mode: https://preview.webflow.com/preview/almasearch?preview=f9d0be2b0064487429e299a5fac9719a
you will find that the background image in Section 1 is indeed fixed as expected.

However, at the published page here: almasearch.webflow.com it is in fact not fixed. I have no idea what is going on, and I’m using an up-to-date version of chrome.

What’s stranger is that the problem only occurs in Chrome… Funnily enough, in Internet Explorer 11, it works perfectly – FOR ONCE!

Absolutely strange! Do you know why Chrome isn’t showing me the fixed background as it should, and as it does in preview mode?

Many thanks!


#4

Hi @nicholasvi,

On my end the fixed background works perfectly fine as well.

I can’t reproduce the bug on my setup but I remember someone fixing this issue on a previous version of chrome by making sure the position of the element having the fixed background is set to static. (yours is on relative).

If doing so change your layout you can still use an extra div to hold the background image.
(parent = section 1, position relative) > (div with background image, position static and you can set width and height to 100% to fit section 1) > rest of you content inside this div.

This way the children elements with absolute positions will look up to the first ancestor without static position (section 1) to evaluate their coordinates and your layout will be the same.

One thing as well is that background fixed property doesn’t work on all mobile browsers but I guess you are using a desktop version so this might no be relevant.

Hope it might resolve the problem. Let me know as it’s not always easy to reproduce this kind of error.

Max