Full-width backgrounds

Scott Kellum wrote on July 29, 2025 at 15:29

The cheap and easy way to get a full-bleed background on an element:

background-color: var(--background);
box-shadow: 33vw 0 0 0 var(--background), -33vw 0 0 0 var(--background);

Wenzel Massag wrote on July 29, 2025 at 16:27

In reply to: @scott@typetura.social.

or use border.

Scott Kellum wrote on July 29, 2025 at 16:41

In reply to: @stairjoke@indieweb.social.

Border affects layout where box-shadow does not, so if I don’t want to spend a ton of time wrangling a complex layout, I use box-shadow.

Matthias Zöchling wrote on July 30, 2025 at 06:51

In reply to: @scott@typetura.social.

border-image will do the trick, as shown in this article from Temani Afif:
🔗 “The complex but awesome CSS border-image property”

Sure, the syntax breaks my head every time I see it, but there are zero side effects, and decades of browser support.

Scott Kellum wrote on July 30, 2025 at 16:41

In reply to: @CSSence@mas.to.

Oh wow, this is wild! I always thought border-image was related to border in the box model, but I guess it’s totally unrelated? That’s so weird, but useful.