← Back to CSS Course | Chapter 2: Colors & Backgrounds | Lesson 9 of 21

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:

  1. The Default: repeat
  2. Repeating in One Direction Only
  3. Stopping the Tile with no-repeat
  4. Even Spacing with space and round
  5. Combining Repeat with Position and Size
Syntax
css 
selector {
  background-repeat: repeat | repeat-x | repeat-y | no-repeat;
}

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.

Note:
  • Accepted values:
  • repeat — tiles both directions (default)
  • repeat-x — tiles horizontally
  • repeat-y — tiles vertically
  • no-repeat — draws once
  • space — tiles without clipping, adds gaps
  • round — tiles and rescales to fit
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:
  • Accepted values:
  • repeat-x — tile horizontally only
  • repeat-y — tile vertically only
  • repeat — tile in both directions (initial value)
  • no-repeat — draw once, no tiling
  • space — tile whole copies with even gaps
  • round — scale tiles so a whole number fits
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:
  • Accepted values:
  • no-repeat — draw the image once
  • repeat — tile in both directions (initial value)
  • repeat-x / repeat-y — tile along one axis
  • space — tile whole copies, spreading leftover space
  • round — stretch or shrink tiles to fit whole
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:
  • Accepted values:
  • space — whole tiles only, leftover space spread evenly as gaps
  • round — tiles are scaled so a whole number fits, no gaps
  • repeat — tile with no adjustment (initial value)
  • no-repeat — draw once
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:
  • Accepted values:
  • repeat — tile in both directions (initial value)
  • repeat-x — tile horizontally only
  • repeat-y — tile vertically only
  • no-repeat — draw the image once
  • space — tile whole copies with even gaps between
  • round — scale tiles so a whole number fits
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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>
Live Example
Related Topics

CSS Background Image · CSS Background Attachment · CSS Background Color · CSS Background Shorthand

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting that repeat is the default, so a small image tiles across the whole element.
  2. Using repeat-x and expecting the image to repeat vertically, when it repeats only horizontally.
  3. Setting no-repeat and then not setting background-position, so the image sits in the top left corner.
Browser Support

Supported in all modern browsers: Chrome, Firefox, Safari, Edge and Opera.

🔒

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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.