CSS Background Repeat

By default a background image tiles endlessly like wallpaper, and background-repeat is the property that decides whether -- and in which direction -- that tiling actually happens.

In this page:

The Default: repeat
Repeating in One Direction Only
Stopping the Tile with no-repeat
Even Spacing with space and round
Combining Repeat with Position and Size

The Default: repeat

Without any background-repeat declared, a background image tiles both horizontally and vertically to fill the entire element, which is exactly right for seamless patterns and textures but usually wrong for a single photo or logo.

Example: The Default: repeat

css

<style>
.box {
  background-image: url('https://placehold.co/30x30');
  height: 150px;
}
</style>
<div class="box">Tiles in both directions by default</div>

Repeating in One Direction Only

repeat-x tiles the image horizontally only, useful for a thin decorative strip running along the top of a header; repeat-y tiles vertically only, useful for a sidebar texture. Both leave the other axis showing just a single instance of the image.

Example: Repeating in One Direction Only

css

<style>
.strip {
  background-image: url('https://placehold.co/30x30');
  background-repeat: repeat-x;
  height: 30px;
}
</style>
<div class="strip">Tiles only horizontally</div>

Stopping the Tile with no-repeat

background-repeat: no-repeat shows the image exactly once, at whatever position background-position specifies, with no tiling in either direction. This is the setting almost always paired with a single hero photo, logo, or icon.

Example: Stopping the Tile with no-repeat

css

<style>
.box {
  background-image: url('https://placehold.co/100x100');
  background-repeat: no-repeat;
  height: 150px;
}
</style>
<div class="box">Shows the image exactly once</div>

Even Spacing with space and round

space repeats the image as many whole times as fit, then distributes any leftover room as equal gaps between tiles rather than cropping one; round scales the image slightly so a whole number of tiles fit exactly with no gaps and no cropping at all.

Example: Even Spacing with space and round

css

<style>
.space {
  background-image: url('https://placehold.co/30x30');
  background-repeat: space;
  height: 60px;
}
.round {
  background-image: url('https://placehold.co/30x30');
  background-repeat: round;
  height: 60px;
}
</style>
<div class="space">Equal gaps, no cropping</div>
<div class="round">Slightly scaled, no gaps</div>

Combining Repeat with Position and Size

background-repeat works alongside background-position (where the first tile starts) and background-size (how big each tile is) -- changing any one of the three often requires reconsidering the others to get the intended visual result.

Example: Combining Repeat with Position and Size

css

<style>
.box {
  background-image: url('https://placehold.co/40x40');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60px;
  height: 150px;
}
</style>
<div class="box">Repeat, position, and size working together</div>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Image Next Lesson → CSS Background Attachment