How can I make the background image take up the entire viewport and have the navbar on top in Webflow? The background image is set as the background of the "Body" and is set to "Custom, 100VW, 100VH, Don't tile", but the image doesn't always match the view height when resizing the screen.
TL;DR
- Create a fixed-position Div (e.g., "Background Wrapper") with 100vw/100vh, background image set to Cover, Center, and No Repeat to fill the viewport reliably.
- Set Navbar z-index higher than the background and use relative/static positioning to layer it above; ensure all other content also layers correctly above the background.
You're trying to make a full-screen background image applied to the Body element in Webflow, with a navbar layered on top. However, you're encountering issues where the background doesn't fill the viewport correctly on resize. Here's the correct way to set this up.
1. Use a Dedicated Fullscreen Div, Not the Body
- The Body element in Webflow doesn’t always respect 100vh on all browsers, especially on mobile where browser chrome affects viewport height.
- Instead, create a new Div block (e.g., name it
Background Wrapper) and style this div to cover the entire viewport.
2. Style the Background Wrapper Properly
- Set the following styles on
Background Wrapper: - Width: 100vw
- Height: 100vh
- Position: Fixed
- Top/Left/Right/Bottom: 0
- Z-Index: 0 (or -1 if you want it behind everything)
- Background Image Settings:
- Background Image: Your chosen image
- Background Size: Cover
- Background Position: Center
- Background Repeat: No repeat
3. Set the Navbar Positioning
- Add your Navbar component to the canvas.
- Set the Navbar’s z-index to 1 or higher (e.g., 10) to ensure it appears above the background image.
- Set Position to Relative or Static (default) so it stacks above the fixed background wrapper.
4. Adjust Page Content Layering
- Make sure all other content has a z-index higher than the background wrapper (which could be z-index 0 or -1).
- Use Relative positioning on page content if needed to keep it layered properly.
5. Ensure Proper Sizing on Mobile
- On mobile Safari in particular, 100vh can be inconsistent due to address bar/chrome behavior.
- For better results, consider using JavaScript to set the full height dynamically, but Webflow native settings cannot fully compensate for mobile chrome shrinkage.
Summary
To ensure a full-viewport background image with a navbar on top, use a fixed-position div with 100vw/100vh and background set to Cover instead of applying the background directly to the Body. This approach avoids viewport inconsistencies and makes layer control easier.