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 top-level Div Block with fixed position, 100VW width, 100VH height, and background set to cover and center.
- Set the Navbar to relative or fixed with a higher z-index to layer it above the background.
You're trying to make a full-screen background image with a navbar layered on top, but the image doesn't consistently fill the viewport on window resize.
1. Use a Div Block Instead of Setting the Background on the Body
- Avoid using the Body element for background images, as it can cause inconsistencies across breakpoints and browsers.
- Instead, create a new Div Block (e.g., name it “Background Wrapper”) and place it at the top level of your page hierarchy.
2. Style the Background Wrapper Correctly
- In the Style panel, set the following:
- Position: Fixed (Top: 0, Left: 0)
- Width: 100VW
- Height: 100VH
- Z-index: 1 (or any low value that stays behind other content)
- Background Image: Custom > Cover, Center Center, Do not tile
- This ensures the background covers the full viewport and stays fixed even on scroll.
3. Layer the Navbar Above the Background
- Select your Navbar element and set:
- Position: Relative (or Fixed if it should stay at the top on scroll)
- Z-index: Any value higher than the background (e.g., 10 or above)
- This allows the navbar to appear visually on top of the background image.
4. Check the Page Structure
- Make sure the background wrapper is placed before all other content in the Navigator.
- Example structure:
- Background Wrapper (background image, z-index: 1)
- Navbar (z-index: 10 or more)
- Other page content
5. Avoid VH Bugs on Mobile
- Mobile browsers sometimes reduce the effective viewport height due to address bars.
- Consider setting Min Height to 100VH instead of fixed 100VH if your content is being cropped.
- For smoother results across devices, consider using 100% height of the html/body with overflow hidden in rare cases.
Summary
Instead of using the Body for the background image, insert a full-screen Div Block positioned fixed with dimensions 100VW and 100VH. Set the Navbar’s z-index higher so it appears on top. This ensures that the image consistently fills the viewport and the navbar overlays it correctly across all screen sizes.