CSS Background Repeat Property

Overview

This lecture explains the CSS background-repeat property, detailing how it controls the repetition of background images along horizontal and vertical axes, and describing the different available values.

Property Description and Syntax

• The background-repeat property sets how a background image is repeated horizontally and vertically.
• It accepts one or two values, where the first controls horizontal repetition and the second controls vertical repetition.
• If only one value is provided, it applies to both axes unless using repeat-x or repeat-y.
• Syntax examples: background-repeat: repeat;, background-repeat: no-repeat;, background-repeat: space round;.

Accepted Values

• repeat: Image repeats both horizontally and vertically to cover the background area (default).
• no-repeat: Image is shown only once, and not repeated.
• repeat-x: Image repeats only along the horizontal axis.
• repeat-y: Image repeats only along the vertical axis.
• space: Images are repeated without clipping, with even spaces between them.
• round: Images are repeated and stretched to fill the area without gaps, which may distort the image.

Single and Two-Value Syntax Mapping

• repeat-x is equivalent to repeat no-repeat.
• repeat-y is equivalent to no-repeat repeat.
• A single keyword (except repeat-x or repeat-y) applies to both axes.

Behavior and Usage Details

• The default value is repeat repeat.
• Edge images may be clipped depending on the size of the background and the background image.
• With space, images are spaced apart evenly, but there may be empty areas if the area is not a multiple of the image size.
• With round, images are proportionally stretched to fill available space, which can distort aspect ratios.
• The property can be used for multiple background images by separating values with commas.

Formal Definition

• Initial value: repeat.
• Applies to all elements as well as ::first-letter and ::first-line pseudo-elements.
• Not inherited.
• Computed as a list of two-value keywords per background layer.
• Animation type: discrete.

Key Terms & Definitions

• background-repeat — CSS property controlling if/how a background image is repeated (tiled) over an element.
• repeat — Repeat image in both axes to fill the background.
• no-repeat — Do not repeat image.
• repeat-x — Repeat image horizontally only.
• repeat-y — Repeat image vertically only.
• space — Repeat images with even spacing, no clipping.
• round — Repeat images, stretching them so no gaps remain.

Action Items / Next Steps

• Practice setting different background-repeat values in CSS and observe the effects.
• Review related properties like background-position and background-size for complete background image control.