How to create multiple, fixed background images now that Chrome/Firefox have changed?

Design help General
1

Hello!

General design / best practice question for you:
Prior to the most recent versions of Chrome & Firefox, I used to use a series of background fixed images to provide a cool background effect as users scroll through a site… This approach still works in Microsoft Edge and you can see an example here:
http://connectable.webflow.io/home-copy-2

Unfortunately, with recent updates to Chrome and Firefox, I can no longer use this approach.

I CAN use one fixed background image, using the approach outlined here:
→ Drag a div to the page, give it a style with height and width, and assign the bg image with full cover. Now give the div a position of fixed, with a z-index of -1, so that the div is underneath all other content. In most cases, the browsers will render a fixed background if the fixed style is applied to the div, not the image itself

HOWEVER, what I want to figure out is out to scroll through multiple background images.

Dear brilliant forum members, what do you think is the best approach that will work in ALL the major browsers?

Thanks in advance for your help.

Here is my public share link: LINK
(how to access public share link)

2

To add onto the question, here’s a link to my project:
https://preview.webflow.com/preview/connectable?preview=336919f85262ed83dfbbaca8d92a0191

3

I’m confused, why not just create multiple sections with fixed backgrounds stacked on top of each other? Does that not work for some reason? I’ve seen many webflow sites use this technique.

1 Like
4

Thanks for responding! That’s how I originally built the project, but recent versions of Chrome and Firefox on Windows don’t render the background images of fixed any longer…rather they render as scroll.

Hence the need to find a new way to do things.

5

Interesting. @Waldo any workarounds?

6

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