Starting a website?

Purpose-Built Templates

ZU2B Blueprints

Business in a Box

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free
FAQ • Support
,

Making a Background Span Full Width, Even Inside a Narrower Container

Field Note #111
🔬 Generalized 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience
You want a section to stretch edge-to-edge across the browser — a hero band, a full-width photo, a banner — but it’s sitting inside a parent element with its own max-width, and no matter what you set the section’s own width to, it stays boxed in.

Why simply setting width: 100% doesn’t work
width: 100% means 100% of the parent’s width, not the browser’s. If the parent itself is capped at, say, 1200px and centered on the page, your “full width” section is still only ever going to be 1200px wide — just as capped as everything around it.
The fix: the “full-bleed breakout”
This is a well-established CSS technique for exactly this situation. It works by sizing the element against the viewport instead of its parent, then using a positioning trick to recenter it:
.full-bleed-section { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

Here’s what each piece is doing:
width: 100vw — sizes the element to 100% of the actual browser viewport, ignoring the parent’s constraint entirely.
position: relative; left: 50%; — shifts the element right by half of its own width, which pushes it well past the right edge of the screen.
margin-left: -50vw; margin-right: -50vw; — pulls it back by half the viewport’s width, which recenters it perfectly regardless of how narrow or wide the parent container actually is.
The combination cancels out cleanly: the element ends up centered on the screen and full-viewport-wide, completely independent of whatever box it’s technically sitting inside.

The one thing that breaks this technique
This trick calculates its offset based on the viewport, not the parent. That’s the whole point — but it means the element needs to be positioned relatively early in the page’s structure, not nested many levels deep inside other constrained containers, or the math can get thrown off by intervening padding. If your full-bleed section isn’t behaving after adding this, check whether it’s nested inside another element that itself has horizontal padding — that padding can shift where “centered” actually lands.

A side effect worth knowing about
Because width: 100vw measures the true viewport width — including the space a scrollbar normally takes up — some browsers can end up with the full-bleed element being very slightly wider than the visible page, causing an extra sliver of horizontal scroll. It’s usually not visually obvious, but if you notice a tiny bit of unwanted horizontal scroll after applying this, that’s the likely cause. There are more advanced workarounds for it, but for most sections it’s not going to be noticeable enough to matter.

When you don’t need this at all
If the “constrained” parent is something you control and nothing else on the page actually needs it to stay narrow, it’s often simpler to just remove or adjust that parent’s max-width instead of working around it. Reach for the full-bleed trick specifically when the constraint is coming from a template, theme, or shared layout you don’t want to change everywhere else.

Tagged in :

,

More from the field