Different backgrounds for different pages

Hello,
i’m trying to create a head for a document site and ran into an issue:
At the top of the document should be a section with a text and a background image. The section’s height should match the height of the text + a row of buttons below. The background image should be displayed behind that and fill the whole section.

I can achieve the desired design by assigning a background image to the section. The problem is, that i want to have different images on different pages. So i can’t use the ‘background image’ function, because it changes the image on all pages.

Is there a way to get the same result using an image component? I tried a lot of different solutions now and none of them worked. The image is either not displayed behind the other elements or goes beyond the section and is not cut off correctly.

Thanks,
Lucas


Here is the link to the site: http://illusionloop.webflow.io/docs/animated-steel-coaster
and the read-only link: https://preview.webflow.com/preview/illusionloop?preview=a5f61cd5de3b77f8342257a9631e4045
You will find the sites that should have different (top section) background images in the ‘docs’ folder.

2 Likes

Hi Lucas,

You are doing the right thing using background images, however, to have different images for each head section, you’ll need to add a combo class to avoid serving the same background image again and again.
https://cl.ly/3r1G3k1M2e2k/Screen%20Recording%202017-06-03%20at%2005.47%20PM.mov

Hope this is helpful.

All the best,
Anna

3 Likes

Helle Anna,
thanks a lot!
This was the simple solution i was looking for :smiley:
I initially wanted to avoid this, because i thought it would add a lot of different classes to the project, but this is apparently not the case with combo classes.

Thanks again,
Lucas

2 Likes

You are most welcome Lucas!

Combo classes are useful that way. You don’t have to re-create classes with the same styling for different elements when you simply need to change one attribute for each element like color, background image, etc…

Glad to help.

Good luck with your project!

1 Like

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