CSS 'background-repeat' Property Explained

The CSS 'background-repeat' property specifies if/how a background image is repeated. By default, background images repeat both vertically and horizontally to fill the element's background area. This property can alter that behavior, allowing the image to be repeated, repeated only in one direction, or not repeated at all, providing flexibility in background image styling.

CSS 'background-repeat' Property Examples

See the Pen CSS 'background-repeat' Property by Webzstore (@webzstore) on CodePen.

The 'background-repeat' property is essential for crafting precise and visually appealing background image presentations. By selecting the appropriate repeat value, designers can significantly enhance web elements' aesthetic quality and functionality.

Browser Support For 'background-repeat' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for background-repeat for the full compatibility details, including mobile browsers.

CSS Syntax of the 'background-repeat' Property

background-repeat: repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2};

background-repeat: repeat-x;            /* same as: repeat no-repeat */
background-repeat: space;               /* same as: space space */
background-repeat: round no-repeat;     /* horizontal: round, vertical: no-repeat */

Usage of the 'background-repeat' Property

Use 'background-repeat' when you need to control the repetition of an element's background image. This is useful for creating backgrounds that seamlessly tile across an element, ensuring a single image is displayed without tiling or having the image repeat only horizontally (like a stripe) or vertically (like a column).

Property Values of the 'background-repeat' Property

• Repeat: The default value. The background image is repeated both vertically and horizontally, and the last tile in each direction is clipped if it does not fit.
• Repeat-x: The background image is repeated only horizontally (shorthand for repeat no-repeat).
• Repeat-y: The background image is repeated only vertically (shorthand for no-repeat repeat).
• No-repeat: The background image is not repeated. The image will only be shown once.
• Space: The background image is repeated as many times as fit without being clipped, and the leftover space is distributed evenly between the tiles, so the tiles keep their original size and aspect ratio. The first and last tiles touch the edges of the background positioning area. If not even one tile fits, it is clipped.
• Round: The background image is repeated and rescaled (stretched or shrunk) so that a whole number of tiles fits exactly, with no clipping and no gaps. Unlike space, round changes the tile size, and because each axis is scaled independently it can distort the image's aspect ratio. The tiles are stretched or shrunk independently on each axis, so when the area's proportions do not match the image's, the tiles are no longer the same shape as the original image.
• Initial: Resets the 'background-repeat' to its default value (repeat).
• Inherit: Inherits the 'background-repeat' from the element's parent.