Making section height relate to background image

Hey guys,

So I’ve been using webflow for a few weeks now. Because I’m a graphic designer with little web design experience, my question might be a bit silly, but here goes.

For this one project I’m trying to have different sections with background images that seamlessly transition to the next. I’ve mocked up the site in photoshop, and sliced the background in chunks that I use as the background images for the different sections.

Right now the images are set to cover, but I don’t want the site to cut off the sides of the images when I scale down my browser window. So what I’m trying to do right now is to make the image scale down in width with the browser window, but to keep the images aligned with each other.

I’ve set the width of my sections to be 100VH. The thing I can’t seem to figure out is how to make the sections conform to the background image height as well, so that the sections stay “attached” as it were.

I hope this makes sense. Thank you in advance.


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

Custom CSS required

http://stackoverflow.com/q/600743/584192

http://stackoverflow.com/q/30035530/584192

1 Like

If you use photoshop to export all the images at the same size - upload the images to the slides in the slider section and set the images to width 100%. That’ll do it.

If you need to add text to the section, just add an absolute positioned content container - 100% width and 100% height - and make it scrollable so that if the content doesn’t fit the content container, the user can scroll to see it all.

hopefully this makes sense.

1 Like

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