CSS background-repeat property

Property values

repeatDefault

The image is repeated along both axes to fill the painting area completely. It is the same as repeat repeat.

background-repeat: repeat;

Try it { }

no-repeat

The image should not be repeated to fill the painting area.

background-repeat: no-repeat;

Try it { }

repeat-x

The image is repeated along x-axis only. It is the same as background-repeat: repeat   no-repeat;

background-repeat: repeat-x;

Try it { }

repeat-y

The image is repeated along y-axis only. It is the same as background-repeat: no-repeat   repeat;

background-repeat: repeat-y;

Try it { }

space

In this case, the images are repeated and spaced out (kept at a distance) so as to fill the painting area completely. The first and last images must touch the corners of the painting area.

background-repeat: space;

Try it { }

round

The image is repeated untill it fills the background painting area. If it does not fit the painting area a whole number of times, the image is rescaled so as to fit the area.

background-repeat: round;

Try it { }