background-repeat property specifies if and how the background image is repeated. The background-repeat property is used in conjunction with the
no-repeat | repeat | repeat-x | repeat-y | space | round
Values of the background-repeat property:
no-repeat – the background image is not repeated
repeat computes to
repeat repeat – the background image is repeated first horizontally and next vertically
repeat-x computes to
repeat no-repeat – the background image is repeated along the horizontal axis
repeat-y computes to
no-repeat repeat – the background image is repeated along the vertical axis.
If the property is set to: repeat, repeat-x or repeat-y, the repeated images are clipped to the size of an element.
See the Pen background-repeat by majadc (@majadc) on CodePen.
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.
See the Pen background-repeat: space; by majadc (@majadc) on CodePen.
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.
See the Pen Untitled by majadc (@majadc) on CodePen.