CSS background-repeat Property

Datetime:2016-08-23 03:04:09          Topic: CSS           Share

background-repeat defines if and how a background image should be repeated within an element if the image doesn't fully cover the element.

7 keywords can be used for the background-repeat property:

  • repeat : The default. Simply tiles the background on the x and y axis.
  • no-repeat : The background image is only shown once.
  • repeat-x : Repeat on the x axis.
  • repeat-y : Repeat on the vertical axis.
  • space : The image is repeated as much as possible while avoiding clipping. The 1st and last copies of the image are placed to either side of the containing element.
  • round : The images will stretch or shrink slightly to avoid clipping and to produce no gaps.

You can use 2 space-separated values to define the repeat value for the x axis and y axis. For example, repeat no-repeat is the equivalent of repeat-x .

repeat , no-repeat , repeat-x and repeat-y are very common and you’re probably used to their behavior already. With these keywords, clipping of the image will occur if a copy only partly fits.

Let’s give an example of the other 2 possible values, space and round , defined in CSS Backgrounds and Borders Module Level 3 (the CSS3 module for backgrounds and borders). If you can, adjust your browser window’s size to better notice the effect.

Note that, as of this writing, Firefox doesn’t support space or round yet, it falls back to no-repeat instead.

background-repeat: space

.alligator-show-box {
  background-size: 150px;
  background-repeat: space;
  background-image:
    url(/images/cowboy.svg);
}

background-repeat: round

.alligator-show-box {
  background-size: 150px;
  background-repeat: round;
  background-image:
    url(/images/pirate.svg);
}




About List