Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

CSS background-repeat: round

By  on  

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:

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

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    Create a NoScript Compatible Select Form Element with an onChange Event

    I wouldn't say that I'm addicted to checking Google Analytics but I do check my statistics often. I guess hoping for a huge burst of traffic from some unknown source. Anyway, I have multiple sites set up within my account. The way to...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!