CSS Background-repeat Property



CSS Tutorial  >  Background   >   Background-repeat

The background-repeat property specifies whether a background image repeats itself, both horizontally and vertically. There are four possible values:

  • repeat: the background image repeats both horizontally and vertically. This is the default value.
  • x-repeat: the background image repeats in the x-direction, or horizontally.
  • y-repeat: the background image repeats in the y-direction, or vertically.
  • no-repeat: the background image does not repeat.

Below are examples for each value:

Repeat

CSS declaration

background-image: url(1keydata.gif);
background-repeat: repeat;
background-size: 100px 100px;

Result:

Repeat-x

CSS declaration

background-image: url(1keydata.gif);
background-repeat: repeat-x;
background-size: 100px 100px;

Result:

Repeat-y

CSS declaration

background-image: url(1keydata.gif);
background-repeat: repeat-y;
background-size: 100px 100px;

Result:

No-repeat

CSS declaration

background-image: url(1keydata.gif);
background-repeat: no-repeat;
background-size: 100px 100px;

Result:

Next: CSS Background-Size




Copyright © 2016   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact