The CSS background-repeat property specifies if and how the background image is repeated. The background-repeat property is used in conjunction with the background-image property.

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

Values of the background-repeat property:

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

repeat-x

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

repeat-y

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

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

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.

Related

• background
• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
• background-color

Resources

• CSS3 Spec
• MDN