← Back to Chapters

CSS Background Repeat

? CSS Background Repeat

⚡ Quick Overview

The background-repeat property controls how a background image repeats (tiles) inside an element. By default, the image repeats both horizontally and vertically to fill the entire area.

  • Used together with background-image.
  • Can repeat in both directions, one direction, or not repeat at all.
  • Perfect for patterns, textures, and decorative backgrounds.

? Key Concepts

  • repeat – tiles the image in both X and Y directions (default).
  • no-repeat – shows a single copy of the image with no tiling.
  • repeat-x – repeats only horizontally (along the X-axis).
  • repeat-y – repeats only vertically (along the Y-axis).
  • Works best with small, seamless images for patterns.

? Syntax

Basic syntax of the background-repeat property:

? View Syntax Example 
/* General syntax for background-repeat */
selector {
  background-repeat: repeat;
  /* repeat | no-repeat | repeat-x | repeat-y */
}

? Code Example: Different Repeat Values

Here are four classes that use different background-repeat values.

? View Code Example (Repeat Variants) 
/* Same image, different repeat behavior */
.repeat {
  background-image: url("pattern.png");
  background-repeat: repeat;
}

.no-repeat {
  background-image: url("pattern.png");
  background-repeat: no-repeat;
}

.repeat-x {
  background-image: url("pattern.png");
  background-repeat: repeat-x;
}

.repeat-y {
  background-image: url("pattern.png");
  background-repeat: repeat-y;
}

? Code Example: With Position & Size

Often, you will combine background-repeat with background-position and background-size for full control.

? View Code Example (Logo Without Repeat) 
/* Single logo positioned at the top-right corner */
.hero-header {
  background-image: url("logo.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 80px 80px;
}

?️ Visual Explanation

  • .repeat – the pattern tiles in both directions, filling the element.
  • .no-repeat – only one image is visible; the rest shows the background color.
  • .repeat-x – the image repeats from left to right, forming a horizontal strip.
  • .repeat-y – the image repeats from top to bottom, forming a vertical strip.
  • .hero-header – a single logo is pinned to the top-right without repeating.

? Tips & Best Practices

  • Use no-repeat for single images like logos or icons.
  • Combine background-repeat with background-position to control exactly where the image appears.
  • Use background-size: cover; or contain; when you want scaling instead of tiling.
  • Choose lightweight, seamless images for repeating patterns to keep pages fast.
  • Always test how your background looks on different screen sizes.

? Practice Tasks

  1. Create a box with a small image and apply background-repeat: repeat;. Resize the box and observe how it tiles.
  2. Change the same box to use background-repeat: no-repeat; and compare the result.
  3. Make two boxes: one with repeat-x and one with repeat-y. See the difference between horizontal and vertical tiling.
  4. Add background-position: center; with no-repeat and observe where the image appears.
  5. Experiment with background-size (e.g. 50px 50px, cover) together with different background-repeat values.