Relative = breaking fixed images

Here is my project: https://preview.webflow.com/preview/thehatch?preview=abf354ffa16245c5385d13a14feb03a5

If you look at section 2’s backround image you’ll see that the image is fixed. If you check it it indeed works. But once you preview it. It doesn’t, the fixed image seems to break.

Then if i toggle section 2 from relative to auto it fixes it, but i need the relative to keep my arrows on the top and bottom.

Anyone have an idea to fix this?

Thanks!

@thesergie Can you take a look? I feel like you can be of good help with this kind of stuff :blush:

Well, here it works but i know what you meen with “image breaks”.
I think the problem is in the background image sizes you have, almost 3 mb, it takes some time to load.

Switch section 2 from relative to auto, then check if it still does it (it does). Also, the images below don’t do this since their on auto.

Can you create a screencast (http://quickcast.io/) to explain further?

http://quick.as/33rqsb6eo

Hope this helps!

Hi @DharmaNode, thanks for the quickcast vid! I took a peek at the site - this issue is pretty common and can usually be resolved by adjusting your element structure to avoid using position:relative.

Example: http://forum.webflow.com/t/resolved-fixed-backgrounds-flash-load-slow-or-other-general-buggy-behavior/9905/6

Try wrapping your sections in a div with position:relative instead.

Thanks for your reply!

When i put my section into a div and changed the position of that div to relative it didn’t really do anything. Am i still doing something wrong?

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