CSS

🎯 What is background-repeat?

The background-repeat property controls:

horizontal repetition
vertical repetition
both directions
or no repetition at all

for a background image.

🧩 Simple Definition

CSS

background-repeat = controls how a background image repeats

💡 Basic Syntax

CSS

background-repeat: repeat;

🧠 Default Behavior

By default, background images repeat both horizontally and vertically.

CSS

background-repeat: repeat;

👉 This is the default value.

⚙️ Accepted Values

Value	Description
repeat	Repeats image horizontally and vertically
repeat-x	Repeats image only horizontally
repeat-y	Repeats image only vertically
no-repeat	Displays image only once
space	Repeats image with equal spacing
round	Resizes image to fit perfectly
initial	Resets to default value
inherit	Inherits value from parent element

🔹 repeat

CSS

background-repeat: repeat;

👉 The image repeats in both directions.

🔹 repeat-x

CSS

background-repeat: repeat-x;

👉 The image repeats only along the horizontal axis.

🔹 repeat-y

CSS

background-repeat: repeat-y;

👉 The image repeats only along the vertical axis.

🔹 no-repeat

CSS

background-repeat: no-repeat;

👉 The image appears only once.

This is commonly used in hero sections and banners.

🔹 space

CSS

background-repeat: space;

👉 The images repeat with equal spacing between them.

Extra space is distributed evenly.

🔹 round

CSS

background-repeat: round;

👉 The image is automatically resized so it fits perfectly before repeating.

🧩 Practical Examples

1. Repeating Background

CSS


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

2. Horizontal Repeat

CSS


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

3. Single Background Image

CSS


.hero {
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
}

🎨 Common Usage with Other Properties

background-repeat is often combined with:

Property	Purpose
background-size	Controls image size
background-position	Controls image placement
background-image	Defines the image

🧩 Example

CSS


.hero {

  background-image: url("hero.jpg");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}

🧠 Explanation

no-repeat

Shows the image only once.

cover

Makes the image fill the entire area.

center

Centers the image inside the element.

⚠️ Important Note

Small images may create unexpected repeating patterns if background-repeat is not controlled properly.

For large banners or hero sections, developers usually use:

CSS

background-repeat: no-repeat;

CSS Background Image

CSS Background Size