CSS background-repeat property

Description

CSS background-repeat property defines the repeating behavior of background image and the orientation of repititon if the painting area is larger than the image.

Syntax

background-repeat : no-repeat | repeat | repeat-x | repeat-y | space | round

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;

no-repeat

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

background-repeat: no-repeat;

repeat-x

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

background-repeat: repeat-x;

repeat-y

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

background-repeat: repeat-y;

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;

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;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?

 
×

Ctrl+D