Streaming live at 10am (PST)

Scrolling and fixed background multiple times


#1

Hello!

I am trying to generate a very simple web page like the Square Space templates where the background image is fixed and the content scrolls over the top…

Please see my link here: https://preview.webflow.com/preview/yefsis?preview=55035cafe5c8945098530fcc720ea2c5

My problem is when I change one background the other images change.

How can I create multiple images?

Thanks!


#2

Your three sections with images backgrounds have the same class .fixed_image_1.

Background image is a CSS property that applies to a certain class. So when you change the background image of one element with a certain class, the change also applies to ALL elements with the same class, all over your website.

To have a different image background on your three sections, use one of the following method:

  • duplicate the class on the last 2 sections and give them a different name
  • or add a combo (second) class to the 2 last sections, this way they will continue to share all the common properties of the original class, but you’llbe able to define a new bg image
  • or delete the class on the last 2 and set a new one (you’ll have to reset other properties too)

#3

Thank you Vincent! works perfectly!
Would you mind helping me with this?

https://preview.webflow.com/preview/konstrukt?preview=52d6b29709c9f1f716ef4529e1e8ec33

I am trying to make the menu work so that you scroll to certain sections but as you can see they are listed and the first three sections work perfectly and scroll to the destination (minus mobile) but when you add a 4th section to the page the tab “Recent work” will stop working and only scroll to a different section.

I cant for the life of me figure this out. Any ideas?

Thanks! Joe


#4

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