background bleed

Aug 9, 2024

3 minutes to read

Here’s a nifty way to escape a container’s width limitations when you need a full-width background colour for a single section. Many thanks to Kevin Powell for sharing it.

.full-bleed {
  --bg: #223;
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax);
  background-color: var(--bg);
}

Aaaand here’s a demo:

Alice in Wonderland

The main element's width is limited to 65ch (roughly 650px), but we'd want one of its child elements to have a full-width background; what to do... 🤔

“Well! I’ve often seen a cat without a grin,” thought Alice; “but a grin without a cat! It’s the most curious thing I ever saw in all my life!”
—Chapter 6, Pig and Pepper

...rest of the book goes here?