background-repeat

The background-repeat is the CSS property which specifies how the background image is repeated or if is repeated. The condition is to determine background-image property.

Values of the background-repeat property:

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

CSS rules for the example ‘div’ element:

 div {
    width:310px;
    height:310px;
    background-color:#62A2BF;
    background-image:url('../images/ai.png');
}

no-repeat

no-repeat – the background image is not repeated

repeat

repeat computes to repeat repeat – the background image is repeated first horizontally and next vertically

background-repeat:repeat;

repeat-x

repeat-x computes to repeat no-repeat – the background image is repeated along the horizontal axis

background-repeat:repeat-x;

Example with background-position:

background-repeat:repeat-x;
background-position:0 100px;

repeat-y

repeat-y computes to no-repeat repeat – the background image is repeated along the vertical axis

background-repeat:repeat-y;

Example with background-position:

background-repeat:repeat-y;
background-position:100px 0;

If the property is set to:repeat, repeat-x or repeat-y, the repeated images are clipped to the size of an element.

space

space computes to space space – the image is repeated without being  clipped. The images are spaced out in order to fill the element. The first and the last image touch the edges of the element (image-1a). The background-position property is ignored unless there is not enough space for two copies of image (image-1b )

round

round computes to round round – the image is repeated without being clipped. The image is rescaled in order to fill the element. If the background painting area is larger then the image  then the pattern repeats to fill the background of the element.

The spaces and round values are compatible only in the Internet Explorer browser  ( from the version 9.0) and the Opera browser (from the version 10.5). The examples of these values show images-1 and image-2.

Example of repeating the background image with space keywords:

background-repeat:space;
background-repeat:space
Image-1
background-repeat:space;
background-repeat:space
Image-1a
background-repeat:space;
background-position:center center;
background-repeat:space
Image-1b

Example of repeating the background image with round keywords:

background-repeat:round;
background-repeat:round
Image 2

Related

Resources

Browser compatibility

Internet Explorer
4.0*
Firefox
1.0*
Chrome
1.0*
Safari
1.0*
Opera
3.5*
Mobile
Safari Mobile
works*
Android
works*
Chrome Mobile
works*
IE Phone
works*
Opera Mini
works*
Opera Mobile
works*
Notes

*round and space are supported only in Opera browser on desktop form 10.5 version, Opera Mini and Opera Mobile.