Build a full-screen hero section in Webflow by setting a Section's Height to 100svh, adding a background image with Cover sizing, placing a Flex container inside for centered content, and adding a semi-transparent overlay for text legibility. This complete pattern combines background, layout, and animation techniques into a single reusable section.
Webflow Hero Section: Full-Screen, Flexbox, and Responsive Patterns
The hero section is the first thing visitors see — and building a great one in Webflow requires combining several techniques: full-screen height, background image setup, overlay for contrast, Flexbox centering, and responsive adjustments for mobile. Unlike tutorials that teach individual layout tools in isolation, this page walks through a complete hero section recipe from scratch. You'll build a professional full-screen hero with a background image, text overlay, headline, subtext, and CTA button — responsive and publish-ready.
Prerequisites
- A Webflow project open in the Designer
- A background image uploaded to the Asset Manager (cloud icon in left toolbar)
- Basic understanding of the Style Panel (S) and Add Elements panel (A)
Step-by-step guide
Add a Section element and set full-screen height
Add a Section element and set full-screen height
Click the Add Elements panel (A) and drag a Section element onto your canvas. Give it a class name: 'hero-section'. In Style Panel (S) > Size section, find the Height input. Type '100svh' (small viewport height — this is the mobile-safe version of 100vh that accounts for iOS Safari's browser toolbar). Press Enter. The section now spans the full height of the visible browser viewport. Using svh instead of vh prevents the common iOS overflow issue where 100vh includes the browser chrome and makes the section taller than the visible area. Also set the section's Max Width to 100% in the Style Panel > Size section to ensure it spans the full width.
Expected result: The Section element spans the full height of the canvas viewport. The section has the class 'hero-section' in the Selector field.
Add a background image with Cover sizing
Add a background image with Cover sizing
With the hero-section selected, scroll to Style Panel > Backgrounds section. Click '+' to add a background layer. In the dropdown, select 'Image'. Click the image preview to open the Asset Manager and select your background image. After selecting the image, set Size to 'Cover' (makes the image always fill the entire section regardless of its dimensions). Set Position to 'Center Center' (keeps the image centered when it's cropped). Set Tile (repeat) to 'No Repeat'. Optionally, set Attachment to 'Fixed' to create a parallax scrolling effect — the image stays fixed while the content scrolls over it.
Expected result: The hero section is filled with your background image, cropped to cover the full area while maintaining the image's center focal point.
Add a semi-transparent overlay for text readability
Add a semi-transparent overlay for text readability
Text directly on a photographic background image is often unreadable due to contrast. Add an overlay: click '+' in the Backgrounds section to add a SECOND background layer on top of the image. Select 'Color' from the dropdown. Set the color to black (#000000) with approximately 45-50% opacity (adjust the 'A' alpha slider in the color picker). This creates a dark scrim that darkens the image just enough to make white text readable without completely hiding the image. Add the color layer ABOVE the image layer in the Backgrounds stack (drag it up in the layer list if needed). Alternatively, use a gradient overlay: '+' > Gradient > set from rgba(0,0,0,0.6) to rgba(0,0,0,0.2) for a directional darkening effect.
Expected result: The background image is visible but darkened. White text placed on the section would be clearly readable.
Set up Flexbox on the Section for centered content
Set up Flexbox on the Section for centered content
Select the hero-section. In Style Panel > Layout, set Display to 'Flex'. Set Direction to 'Column' (content will stack vertically: heading, then subtext, then button). Set Justify to 'Center' (centers the content stack vertically in the full-height section). Set Align to 'Center' (centers the content stack horizontally). Now all direct children of the hero section will be centered both ways. Add Padding: 40px on all sides to ensure the content doesn't touch the section edges — especially important on mobile where the viewport is narrow.
Expected result: The hero section is centered both horizontally and vertically, ready for content to be added inside.
Add hero content: heading, subtext, and CTA button
Add hero content: heading, subtext, and CTA button
Now add the hero content elements. Click Add Elements (A) and drag a Heading into the hero section. Give it class 'hero-heading'. Set Font Color to white, Font Size to 64px (Desktop), Font Weight to Bold 700, Letter Spacing to -0.02em, Text Align to Center. Click Add Elements again and drag a Paragraph below the heading inside the hero section. Class: 'hero-subtext'. Font Color: rgba(255,255,255,0.85), Font Size: 20px, Text Align: Center, Max Width: 600px, Margin: 0 auto. Add a Button element below the paragraph. Class: 'btn-hero-cta'. Style with your brand primary color, white text, 16px top/bottom padding, 32px left/right padding, border-radius 6px.
Expected result: The hero section displays a centered heading, subtitle, and CTA button all properly spaced on the background image.
Add spacing between content elements
Add spacing between content elements
Select the hero section container. In the Flex controls, set Gap to 24px. This adds 24px of space between the heading, subtext, and button automatically — no manual margins needed on each child. If you want unequal spacing (more space between the heading and subtext than between the subtext and button), remove the Gap and instead add Margin Bottom to individual elements: hero-heading > Margin Bottom: 16px, hero-subtext > Margin Bottom: 32px (more space before the button for visual separation). The button has no margin because it's the last item.
Expected result: The heading, subtext, and button are properly spaced with clear visual hierarchy. The CTA button has the most 'breathing room' above it.
Make the hero section responsive for mobile
Make the hero section responsive for mobile
Switch to Mobile Portrait breakpoint (≤478px) in the breakpoint bar. Select the hero-heading. Style Panel > Typography > Font Size > change to 36px (from Desktop's 64px). Line Height: 1.15. Select hero-subtext. Font Size: 16px. Select the hero section container. Reduce Padding to 24px all sides. Check that the section height is still correct — if it's not filling the screen, confirm the 100svh value is set at the Desktop level (it cascades down). Most importantly, ensure there's no horizontal overflow: check that the heading and subtext haven't created a horizontal scroll. If they have, set Max Width to 100% on the content elements and ensure text-align is Center.
Expected result: The hero section looks clean on Mobile Portrait with properly sized text, no horizontal scroll, and content fitting within the visible viewport.
Add an entrance animation to the hero content
Add an entrance animation to the hero content
Hero section content often fades in on page load for a polished effect. Select the hero-heading element. Open the Interactions panel (H, lightning bolt icon). Click '+' next to Element Triggers > select 'Page Load'. Click 'Add Animation' and choose to create a new animation. Name it 'Hero Fade In'. Set initial state: Opacity 0%, Move Y: 30px. Set final state: Opacity 100%, Move Y: 0px, Duration: 0.7s, Easing: Ease Out. For the subtext, create a similar animation but add a 0.15s Delay. For the CTA button, add a 0.3s Delay. This staggered reveal creates a cascading entry effect where the heading appears first, then the subtext, then the button.
Expected result: When the page loads in Preview mode, the heading, subtext, and button fade up from below in a smooth staggered sequence over about 0.7-1 second total.
Complete working example
1HERO SECTION — COMPLETE BUILD SUMMARY23HTML STRUCTURE:4 Section.hero-section5 Div.hero-content (optional inner wrapper for max-width)6 Heading.hero-heading7 Paragraph.hero-subtext8 Button.btn-hero-cta910HERO SECTION STYLES:11 Size > Height: 100svh12 Backgrounds > Layer 1 (top): Color #000000 @ 45% opacity13 Backgrounds > Layer 2 (bottom): Image > Cover > Center Center > No Repeat14 Layout > Display: Flex > Direction: Column > Justify: Center > Align: Center15 Spacing > Padding: 40px all sides16 Layout > Gap: 24px1718HEADING STYLES:19 Font: 64px Bold, White, Letter Spacing -0.02em, Text Align Center20 Max Width: 800px, Margin: 0 auto21 Mobile Portrait override: 36px2223SUBTEXT STYLES:24 Font: 20px Regular, White 85% opacity, Text Align Center25 Max Width: 600px, Margin: 0 auto26 Mobile Portrait override: 16px2728CTA BUTTON:29 Background: brand primary color30 Padding: 16px 32px31 Border Radius: 6px32 Font: 16px SemiBold, White3334ANIMATIONS (Interactions panel):35 Heading: Page Load > Opacity 0→100%, Move Y 30→0px, 0.7s, Ease Out, 0s delay36 Subtext: same, 0.15s delay37 Button: same, 0.3s delayCommon mistakes
Why it's a problem: The hero section is taller than the viewport on iOS — content gets cut off or scrollbar appears
How to avoid: Change the Section's Height from '100vh' to '100svh' (small viewport height). In the Style Panel > Size, click the height input, clear '100vh', and type '100svh'. The svh unit accounts for iOS Safari's dynamic toolbar that appears and disappears while scrolling, preventing the common iOS overflow issue.
Why it's a problem: Hero text is unreadable on the background image despite adding an overlay
How to avoid: The background overlay layer may be below the image in the Backgrounds stack instead of above it. In Style Panel > Backgrounds, check the layer order — the dark overlay (Color layer) must appear ABOVE the image layer. If needed, drag the color layer to the top of the stack. Also check the overlay opacity — values below 30% are often insufficient for light-colored images.
Why it's a problem: Flexbox centering works on Desktop but the hero content is top-aligned on Mobile
How to avoid: Check if the hero Section's height is defined at the Mobile breakpoint. If the section height is 'Auto' at Mobile, there's no space for Flex centering to work. The 100svh height should cascade from Desktop to Mobile automatically — confirm it's still showing at the Mobile breakpoint by selecting the section and checking the Height value (if it shows without an orange dot, it's inherited from Desktop, which is correct).
Why it's a problem: The background image looks blurry or pixelated in the published hero
How to avoid: The uploaded image may be too small or in an inefficient format. For a full-screen hero background, upload the image at minimum 1920px wide. Use AVIF or WebP format for the best quality-to-file-size ratio. In the Asset Manager (cloud icon), you can select the image and click 'Compress' to convert to WebP or AVIF. Check that Size is set to Cover (not Contain or a fixed pixel size) in the Backgrounds section.
Best practices
- Use 100svh (not 100vh) for hero section height to prevent iOS Safari overflow where the browser toolbar adds extra height.
- Always add a background overlay (rgba black, 40-55% opacity) on photographic backgrounds — even 'light' images become unpredictable in different lighting conditions and on different screens.
- Set a Max Width on hero heading and subtext (800px and 600px respectively) to prevent excessively wide text lines on large monitors — optimal line length for readability is 45-75 characters.
- Keep hero entrance animations under 1 second total and always use Ease Out easing — elements should arrive naturally, not slowly float in.
- Test the hero on a real mobile device before publishing — iOS Safari viewport quirks and font rendering differences make real device testing essential for hero sections.
- Give the hero section a fallback background color that matches the image's dominant tone (e.g., a dark navy if the photo is a dark cityscape). This shows while the image loads and prevents a white flash.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a hero section in Webflow that should be full-screen height with a background image and centered text content. I want a semi-transparent overlay so the white text is readable, and a staggered fade-in animation for the heading, subtitle, and CTA button on page load. Walk me through the complete setup — section height, background layers, Flexbox centering, overlay opacity, and the entrance animation steps in Webflow's Interactions panel.
Build a full-screen hero section in Webflow with: 100svh height, a background image from the Asset Manager with Cover sizing, a 45% opacity black overlay, Flex column layout centered vertically and horizontally, a white 64px heading, 20px subtitle text at 85% white opacity, and a primary CTA button. Add a staggered page load fade animation with 0.15s delays between each element.
Frequently asked questions
How do I make a Webflow hero section fill the whole screen?
Select the Section element, open the Style Panel (S), go to the Size section, and set Height to '100svh'. This makes the section exactly as tall as the visible browser viewport. Use svh (small viewport height) rather than vh to avoid the iOS Safari issue where 100vh includes the browser toolbar and makes the section slightly taller than what's visible.
Should the hero section overlay be a separate Div Block or a background layer?
Both approaches work, but the background layer method is simpler and keeps the HTML structure clean. In Style Panel > Backgrounds, add a Color layer (rgba black, 40-50% opacity) as the top layer and your Image below it. The background layer approach means you don't need an extra element in your Navigator. The Div Block overlay approach is useful if you want the overlay to have a gradient or if you need to animate the overlay independently.
Can I add a video background to a Webflow hero section instead of an image?
Yes. Add a Background Video element (Add Elements panel > Media > Background Video) inside your hero section with Absolute positioning covering the full section area. Set the video to autoplay, loop, and muted (required for autoplay in browsers). Add your overlay on top with z-index. Webflow's background video element supports mp4 and webm formats up to 30MB. See the Background Video tutorial for the complete setup.
How do I add a scroll indicator arrow at the bottom of my hero section?
Add a Div Block inside the hero section with class 'scroll-indicator'. Set Position: Absolute, Bottom: 32px, Left: 50%, Transform: TranslateX(-50%) via Custom Properties to center it horizontally. Place an SVG or image of a down-pointing chevron inside. Add a hover effect (opacity 60% → 100%) and link it to an anchor tag pointing to the section below the hero. For an animated bobbing effect, create a Page Load loop interaction that moves the arrow Y: 0px → 8px → 0px on a 1.5s infinite loop.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation