CssHow-ToBeginner · 3 min read

How to Set Background Repeat in CSS: Simple Guide

Use the background-repeat CSS property to control if and how a background image repeats. You can set it to repeat, no-repeat, repeat-x, or repeat-y to repeat the image in different directions or not at all.

📐

Syntax

The background-repeat property accepts these main values:

repeat: repeats the background image both horizontally and vertically.
no-repeat: shows the image only once.
repeat-x: repeats the image only horizontally.
repeat-y: repeats the image only vertically.

You can also use space and round for advanced spacing and scaling.

css

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

💻

Example

This example shows a background image repeating only horizontally across the page.

css

html {
  height: 100%;
  margin: 0;
}
body {
  height: 100vh;
  margin: 0;
  background-image: url('https://via.placeholder.com/100x100.png?text=BG');
  background-repeat: repeat-x;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
}
p {
  background-color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

Output

A webpage with a light gray background and a small square image repeated horizontally across the page behind a centered white paragraph box.

⚠️

Common Pitfalls

One common mistake is forgetting to set background-repeat when you want the image to appear only once, causing it to repeat by default. Another is using a very small image without controlling repeat, which can make the background look cluttered.

Also, if the image URL is incorrect or missing, no background will show, which might confuse you into thinking repeat is not working.

css

/* Wrong: image repeats by default */
body {
  background-image: url('image.png');
}

/* Right: prevent repeating */
body {
  background-image: url('image.png');
  background-repeat: no-repeat;
}

📊

Quick Reference

Value	Description
repeat	Repeats image horizontally and vertically (default)
no-repeat	Shows image once, no repetition
repeat-x	Repeats image only horizontally
repeat-y	Repeats image only vertically
space	Repeats image with space between, no clipping
round	Repeats image scaled to fit without clipping

✅

Key Takeaways

Use background-repeat to control image repetition in CSS backgrounds.

repeat repeats both ways; no-repeat shows the image once.

repeat-x and repeat-y repeat horizontally or vertically only.

Always check your image URL to ensure the background shows correctly.

Use space and round for advanced repeat control.