Understand CSS background-repeat Property

By Digamber Rawat Last updated on
background-repeat is what we use to define how a background image should be repeated inside an element in case the image fails to cover the entire element.

There are 7 values for CSS background-repeat property:

  • no-repeat: The background image will be repeated.
  • repeat: Here we are talking about the default property. The background will be tiled on the y and x axis.
  • repeat-x: Here the background image will be repeated on the axis x.
  • repeat-y: Here the background image will be repeated on the axis y.
  • space: While repeating the image, here we avoid clipping.
  • round: The image will be subjected to shrinking or stretching to make sure there is no clipping and gaps.

In order to show the repeat values for x & y values, we provide two values separated by space. We can take the example of repeat: no-repeat. Well, repeat-y and repeat-x are very common. In fact, you may have already used it. With the help of these keywords, you effectively deal with clipping.

Well, it is time for us to examine an example. We are going to consider values for round and space keywords. If you wish to have a clear look at the effect, then you may adjust your browser window as per your need.

But you must know the fact that Firefox hasn’t supported round or space yet. Firefox will go for no-repeat.

CSS Example – background-repeat: space

<div class="demo-block"> </div>
 .demo-block {
     margin: 0 auto;
     width: 650px;
     height: 420px;
     background-repeat: space;
     background-image: url('steve-rogers-shield.png');
}

background-repeat space

CSS Example – background-repeat: round

.demo-block {
    margin: 0 auto;
    width: 650px;
    height: 420px;
    background-repeat: round;
    background-image: url(steve-rogers-shield.png);
}

background-repeat round

CSS Example – background-repeat: no-repeat

.demo-block {
    background-repeat: no-repeat;
    background-image: url(steve-rogers-shield.png);
}

background-repeat no-repeat

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.

Hire Me