CSS Background-repeat Property

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: