Extend the background to the edge of the screen
Extend the background of an element outside of its container to cover the full screen width
- No extra element
- No pseudo-element
- No overflow issue
- Only one CSS declaration
.full-background {
border-image: conic-gradient(pink 0 0) fill 0//0 100vw;
}See the Pen Full screen background color by Temani Afif (@t_afif) on CodePen.
Related: smashingmagazine.com/2024/01/css-border-image-property/
Another idea more versbose using box-shadow
.full-background {
--c: pink;
background: var(--c);
/* a big box-shadow */
box-shadow: 0 0 0 100vw var(--c);
/* clip only the top and bottom part of it */
clip-path: inset(0 -100vw);
}See the Pen Full screen background color by Temani Afif (@t_afif) on CodePen.