Complete Newbie looks for Help with Interactive hero layout

Community resources Getting started
1

Dear all

I have been led to Webflow as the best suited way to go for an unusual website creation. I reach out in the hope that some people here would have done something like this before and are happy to share how they did it, I would be so grateful to you.

Here it is: I would like to create a homepage section hero background image with elements glued in position on top of the image for interaction, including buttons, animations, clickable images and text. Of course this would only work for desktops and the elements still need to autofit over the autofitting image between the different size screens, staying in place over the image. I imagine I’d have to create something different for the mobile version. It would be something that’s like more like a game than a website. Has anyone done this? Does anyone have examples of how something like this is done? I am happy to share screen shots.

2

Hi there,

Creating a hero section with positioned elements in Webflow involves a few key steps:

First, add a Section element to your page and place a Container inside it. This creates your base structure with proper padding and alignment. Set the Section’s min-height to achieve your desired hero height (e.g., 100vh for full-screen).

For positioning elements within your hero:

  1. Set the Container’s position to “Relative”
  2. Add your interactive elements inside the Container
  3. Set each element’s position to “Absolute”
  4. Use top, bottom, left, and right properties to place elements precisely
  5. Adjust z-index values to control layering (higher numbers appear on top)

For the background image, add a Div block inside your Section but before the Container. Set it to position: absolute, width: 100%, height: 100%, and adjust the background settings in the Style panel. Use background-size: cover and background-position: center for optimal responsive behavior.

Remember to test your hero section across different screen sizes and adjust positioning values using breakpoints as needed.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Thank you so much, I will work on this and reply to the thread!