background-repeat property sets how a background image gets repeated. It can be repeated horizontally, vertically or along both the axis, or can be prevented from repeating.
By default, if the size of the background image of an element is smaller than the size of the element's container box, then the background image repeats horizontally as well as vertically until the background of the box is filled. This behaviour can be changed by using the
repeat : Background image repeats both horizontally and vertically. This is the default value.
repeat-x : Background image repeats only horizontally.
repeat-y : Background image repeats only vertically.
no-repeat : Background image does not repeat.
round : If a background image doesn't fit the element's container box on repeating a whole number of times, then the repeated images gets resized (stretched or squished) till the background area gets filled.
space : Image gets repeated as many times as possible without clipping. The first and last images touch the two edges of the element, and whitespace is evenly distributed between the images.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
In this demo, note that the images got resized when the
background-repeatproperty is set to
round, and the whitespace got evenly distributed when set to
Giving different values for horizontal and vertical repetition
For giving different background repetition behaviour for horizontal and vertical directions, two keyword values are used. The first keyword decides the repetition behaviour of background image in the horizontal direction, whereas the second keyword decides in the vertical direction.
Look at the following example.
background-image: url('penguin.png'); background-repeat: repeat no-repeat;
Here, a two keyword value is given to the
background-repeat property. The first keyword repeats the background image in the horizontal direction, whereas the second keyword prevents its repetition in the vertical direction.
Have a look at the following demo.
This property is supported in all the major browsers.