CSS background-repeat: round
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!
