CSS background-repeat: round

Celý článek

The CSS spec is full of gems that sneak their way past most of us web designers and developers. Stuff like :focus-within, prefers-reduced-motion, and prefers-color-scheme suddenly make their way into CSS without us really finding out for months or years. One such example is background-repeat: round.

background-repeat: round repeats a background image without clipping!

.my-element {
  background-image: url(logo.png);
  background-repeat: round;
}

Addy Osmani’s tweet beautifully depicts the effect of round:

TIL CSS "background-repeat: round" https://t.co/sS9H9HmqQ6 ~ repeats background images without clipping pic.twitter.com/R4rzDJ36R9

— Addy Osmani (@addyosmani) June 23, 2020

This background effect is really nice, as clipped backgrounds cheapen the look of any element!

The post CSS background-repeat: round appeared first on David Walsh Blog.