CSS Background Repeat

Understanding Background-Repeat

The background-repeat property controls how background images are tiled (repeated) within an element. From simple repetition to advanced spacing techniques, this property is essential for creating patterns, textures, and efficient background designs.

Interactive Background-Repeat Demo

/* Generated CSS will appear here */

Background-Repeat Values Explained

1. repeat (default)

The background image repeats both horizontally and vertically to fill the entire element.

.repeat-default {
    background-image: url('pattern.svg');
    background-repeat: repeat; /* or omit, as it's default */
    background-size: 50px 50px;
}

2. repeat-x

The image repeats only horizontally (along the x-axis).

.horizontal-repeat {
    background-image: url('border-pattern.svg');
    background-repeat: repeat-x;
    background-position: top;
    background-size: 100px 20px;
}

3. repeat-y

The image repeats only vertically (along the y-axis).

.vertical-repeat {
    background-image: url('sidebar-pattern.svg');
    background-repeat: repeat-y;
    background-position: left;
    background-size: 20px 100px;
}

4. no-repeat

The image appears only once, no repetition.

.single-image {
    background-image: url('logo.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 150px 150px;
}

Advanced Repeat Values: Space & Round

.spaced-pattern {
    background-repeat: space;
    /* Images spaced evenly */
    /* No clipping at edges */
}

.rounded-pattern {
    background-repeat: round;
    /* Images scaled to fit */
    /* No gaps between images */
}

Controlling the Spacing Between Tiles

There is no background-gap property. The gap between repeated tiles comes from the tile itself, so you have three ways to control it:

• Let the browser distribute it: background-repeat: space keeps each tile at its background-size and spreads the leftover room evenly between tiles. You control the tile size, but not the exact gap.
• Build the gap into the tile: make the tile larger than the shape it contains, leaving transparent padding. In an SVG, enlarge the width/height (or viewBox) around the shape; with gradients, make background-size bigger than the drawn area. The gap is then exact and stays fixed.
• Scale the tile: because the tile includes its transparent padding, changing background-size scales the shape and the gap together.

/* 20px dot centred in a 60px tile = 40px between dots */
.dot-grid {
    background-image: radial-gradient(circle, #667eea 10px, transparent 10.5px);
    background-size: 60px 60px;
    background-repeat: repeat;
}

/* SVG tile: a 40px square inside a 56px canvas = 16px gaps */
.square-grid {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56"><rect x="8" y="8" width="40" height="40" fill="%23667eea"/></svg>');
    background-repeat: repeat;
}

/* Fixed tile size, gaps distributed automatically */
.even-gaps {
    background-image: url('icon.svg');
    background-size: 40px 40px;
    background-repeat: space;
}

Repeating Only Horizontally or Vertically

repeat-x and repeat-y are shorthands for the two-value syntax: repeat-x equals repeat no-repeat, and repeat-y equals no-repeat repeat. The first value controls the horizontal axis, the second the vertical axis, which also lets you mix values such as space no-repeat (see Two-Value Syntax below).

Can a Background Flip or Mirror on Each Repeat?

No. CSS has no repeat value that mirrors alternate tiles; every repetition is an identical copy. The usual workaround is to make a tile that already contains the mirrored copy: for example, a tile twice as wide with the original on the left and the flipped version on the right (flip it in an image editor, or inside an SVG tile with transform="scale(-1,1)"). Repeating that double tile produces the alternating effect.

/* Tile = original + mirrored copy side by side */
.mirrored-pattern {
    background-image: url('tile-with-mirror.svg'); /* 200 x 100 */
    background-size: 200px 100px;
    background-repeat: repeat;
}

Visual Comparison

Creating Seamless Patterns

1. Polka Dots Pattern

.polka-dots {
    background-image: radial-gradient(
        circle,
        #667eea 2px,
        transparent 2px
    );
    background-size: 20px 20px;
    background-repeat: repeat;
}

2. Diagonal Stripes

.diagonal-stripes {
    background-image: repeating-linear-gradient(
        45deg,
        #667eea,
        #667eea 10px,
        transparent 10px,
        transparent 20px
    );
    /* No background-repeat needed for repeating gradients */
}

3. Grid Pattern

.grid {
    background-image: 
        linear-gradient(#ddd 1px, transparent 1px),
        linear-gradient(90deg, #ddd 1px, transparent 1px);
    background-size: 20px 20px;
    background-repeat: repeat;
}

4. Complex Patterns with SVG

.svg-pattern {
    background-image: url('data:image/svg+xml,<svg>...</svg>');
    background-size: 100px 100px;
    background-repeat: repeat;
}

/* Combine multiple patterns */
.layered-pattern {
    background: 
        radial-gradient(circle at 10px 10px, #667eea 2px, transparent 2px),
        radial-gradient(circle at 30px 30px, #764ba2 2px, transparent 2px);
    background-size: 40px 40px;
    background-repeat: repeat;
}

Practical Applications

1. Decorative Borders

2. Watermark Effect

3. Icon Navigation

/* No-repeat for navigation icons */
.nav-item {
    padding-left: 30px;
    background-image: url('icon.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px 20px;
}

/* Different icons for each item */
.nav-home { background-image: url('home.svg'); }
.nav-about { background-image: url('about.svg'); }
.nav-contact { background-image: url('contact.svg'); }

4. Responsive Patterns with Space

Two-Value Syntax

Modern CSS allows separate repeat values for horizontal and vertical axes:

/* Two-value syntax: horizontal vertical */
.custom-repeat {
    background-repeat: repeat no-repeat;    /* Repeat horizontally only */
    background-repeat: no-repeat repeat;    /* Repeat vertically only */
    background-repeat: space round;         /* Space horizontally, round vertically */
    background-repeat: repeat space;        /* Repeat horizontally, space vertically */
}

/* Practical example: decorative corners */
.decorated-box {
    background-image: 
        url('corner-tl.svg'),
        url('corner-br.svg');
    background-position: 
        top left,
        bottom right;
    background-repeat: no-repeat;
    background-size: 50px 50px;
}

Performance & Optimization

/* Performance-optimized patterns */

/* 1. CSS gradient instead of image */
.optimized-stripes {
    background-image: repeating-linear-gradient(
        45deg,
        #f0f0f0,
        #f0f0f0 10px,
        #e0e0e0 10px,
        #e0e0e0 20px
    );
    /* No external image = no HTTP request */
}

/* 2. Single SVG pattern tile */
.optimized-pattern {
    background-image: url('data:image/svg+xml;base64,...');
    background-size: 20px 20px;
    background-repeat: repeat;
    /* Inline SVG = no HTTP request */
}

/* 3. Seamlessly scrolling pattern:
      move the tiles by exactly one tile width */
.animated-pattern {
    background-image: url('pattern.svg');
    background-size: 100px 100px;
    background-repeat: repeat;
    animation: slidePattern 10s linear infinite;
}

@keyframes slidePattern {
    to { background-position: 100px 0; }
}
/* Animating background-position repaints every frame;
   for heavy use, put the pattern on an oversized
   pseudo-element and animate its transform instead. */

Common Pattern Library

Browser Compatibility

space, round and the two-value syntax are supported in all current browsers; the fallback below only matters for very old engines.

/* Fallback for older browsers */
.pattern {
    background-repeat: repeat;      /* Fallback */
    background-repeat: space;       /* Modern browsers */
}

/* Feature detection */
@supports (background-repeat: space) {
    .modern-pattern {
        background-repeat: space;
    }
}

Best Practices

• Choose appropriate repeat values based on design intent
• Optimize pattern images - smaller tiles load faster
• Use space/round for responsive designs
• Consider CSS gradients for simple patterns
• Test across different screen sizes when using space/round
• Combine with background-size for precise control
• Use no-repeat for logos and single images
• Apply repeat-x/y for borders and edges

/* Best practice example: Responsive pattern */
.responsive-background {
    /* Base pattern */
    background-image: url('pattern.svg');
    background-size: 60px 60px;
    
    /* Mobile: smaller pattern, regular repeat */
    background-repeat: repeat;
}

@media (min-width: 768px) {
    .responsive-background {
        /* Tablet: larger pattern, space for even distribution */
        background-size: 80px 80px;
        background-repeat: space;
    }
}

@media (min-width: 1200px) {
    .responsive-background {
        /* Desktop: optimal size with round */
        background-size: 100px 100px;
        background-repeat: round;
    }
}

Related Resources