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

1.0	1.0	1.0	4.0	3.5

CSS Syntax of the ‘background-repeat’ Property

background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;

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.
• Repeat-x: The background image is repeated only horizontally.
• Repeat-y: The background image is repeated only vertically.
• No-repeat: The background image is not repeated. The image will only be shown once.
• Space: The background image is repeated as much as possible without being clipped, and the images are spaced out evenly. The first and last images touch the edges of the element.
• Round: The background image is repeated and scaled to fit the container by maintaining its aspect ratio. The image may be stretched or shrunk to fit.
• Initial: Resets the ‘background-repeat‘ to its default value (repeat).
• Inherit: Inherits the ‘background-repeat‘ from the element’s parent.