▼
Streaming live at 10am (PST)

Responsive width & height (100vh) Hero Banner

#1

I am having some difficulty with image size (background image and centered icon) in the hero section of my site. I’ve purchased two templates - Dots and Marco - trying to get around this, but even when i try to use the exact page settings and just replace the images, im still running into trouble.

Is there a setting that I am missing for 100vh hero sections? I primarily want the hero section to scale responsively.

Site:
https://preview.webflow.com/preview/7329-studio-final-site-layout?preview=79c4e2b625d32b820c43439669a8d17a

Here is an example to explain what I’m referring to:

  1. Go to "home v.2"
    Marco template: Please reference how the purple hero section maintains it’s width and height proportionately even when changing window size and switching between desktop, tablet, etc.

  2. Go to last page - “test”
    -test page with the imagery im trying to use. See how the leaf background image does not scale proportionately? I’d like the background and 7329 icon to be proportionately sized and placed regardless of view (i.e. if screen gets smaller, both images get smaller but remain in the same position).

Apologies if this is a very silly question - this is my first time using webflow and i cant seem to figure this one out. Bottom line - Just want to know exact px size for hero background image and settings to ensure all images/text elements within that section remain 100vh and do not get disproportioned when scaling between diff web browser sizes

#2

Hi, your links are not available. You may want to check and re-post.

#3

Thanks for the heads up. How do I make them available?

#4

Yes, go and click the Share in project settings and make sure the link works.

#5

updated the original post!

#6

No no don’t think that, we all start somewhere, and Webflow is super cool, I promise you get it in no time. So you have 2 topics to address:

  1. Background Image
  2. Inner Logo Image

#1: Background images will not scale. Remember it’s set as a background so it’s not actually on the document, which means it’s not really on the page, it’s in the ‘background’. We use this when adding elements on top of it, without effecting it. It goes over but is not a part of it. If you want a background image to scale you’ll need to add it to a Div, make it Relative, then position logo image on top and make it Absolute. Then the background will scale with the logo.

#2: You see I remove the excess div layers, you only needed one. Simply use flex to center it, no other display styles are needed. Then type in 50vw + enter to add “VW”, which stands for “Viewport Width”. That tells the browser to scale side-to-side, horizontally. You would use “VH” for height.

Now it all works and scales. Here’s the video:

#7

Thank you so much! Really appreciate it :slight_smile:

#1 Background Image- Thanks for clearing that up. Regarding the scenario for a background image scaling, is that what is done for the slider on this page of the template? http://marco-template.webflow.io/home-pages/home-3

See screenshots below referencing what I’m going for - the image as the background of the slide remains consistently proportioned (no part of image is cut off) regardless of browser size. Screenshot 2 references how the second section just jumps up into view, rather than having the background from section 1 just expand to full vh.

12 PM
Screen Shot 2018-01-11 at 6.06.12 PM.jpg1844x1359 544 KB
28 PM
Screen Shot 2018-01-11 at 6.06.28 PM.jpg957x1215 319 KB
42 PM
Screen Shot 2018-01-11 at 6.06.42 PM.jpg2446x1218 611 KB

#8

I just created an additional test page trying out your recommendation for having the background image scale.

“If you want a background image to scale you’ll need to add it to a Div, make it Relative, then position logo image on top and make it Absolute. Then the background will scale with the logo.”

Can’t seem to get that to work!

Please see the link below, and reference the page - Test copy:
https://preview.webflow.com/preview/7329-studio-final-site-layout?preview=79c4e2b625d32b820c43439669a8d17a

#9

Okay if you want the image to scale simply at the image itself it will scale. The logo can be absolute, that’s true. Let me try it a sec.

#10

Okay dang this one stumped me for a bit; didn’t need a video, here’s the process.

#1 - Section
Flex: Justify Center, Align Center
Overflow: Hidden
Relative

#2 - Div Block:
Block
Absolute
Typography: Center
Insert the two text components

#3 - Add Image:
Must be really large, bigger the the section I.e., 2900 x 2000
No styles added

#4 - Text Scale:
The text will stay centered, the Image will scale down. To have text scale, add “VW” to each device view, incrementing up each view. It’s personal preference. Adjust - Text Size & Line Height. Percentages could be used, but I prefer this.

Desktop: Heading 3 & 8, Paragraph 1 & 3
Tablet: Heading 5 & 8, Paragraph 2 & 2
Mobile Landscape: Heading 5 & 8, Paragraph 2 & 2
Mobile Portrait: Heading 7 & 8, Paragraph 2 & 1

If you want the text more towards the top, it takes some tweaking but only adjust on the Text Wrapper Div, not the Section. Take the section Flex to Align Top, instead of Align Center. Use inner padding on the text wrapper, adjust for each device view.

Now you’ll have a beutiful high resolution header image with clean centered text on top.
:grin:

Let me how it goes.

#11

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