Extend the background to the edge of the screen

Temani Afif6/9/22About 1 minCSSArticle(s)blogcss-tip.comcss

Extend the background to the edge of the screen 관련

CSS > Article(s)

Article(s)

Use a border-image trick to create an overflowing background

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 Full screen background color by t_afif on CodePen.

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 Full screen background color by t_afif on CodePen.

More CSS Tips

Extend your underline to the edge of the screen II Use a border-image trick to create an overflowing underline. June 20, 2022
Extend your underline to the edge of the screen Use a border-image trick to create an overflowing underline. June 16, 2022
Responsive grid of Hexagon shapes Using a shape-outside trick to create a reponsive grid of hexagon shapes. June 03, 2022
Wavy text animation II Use CSS gradients to create a wavy text animation. April 20, 2022

Extend the background to the edge of the screen

Use a border-image trick to create an overflowing background