The 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.
CSS
background-repeat: value;
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 background-repeat property.
Values
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.
Example
See the Pen background-repeat property values by Aakhya Singh (@aakhya) on CodePen.
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 space.
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.
CSS
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.
See the Pen Giving two values to background-repeat property by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is supported in all the major browsers.
