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 */
}

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,');
    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. GPU-accelerated transforms */
.animated-pattern {
    background-repeat: repeat;
    will-change: transform;
    animation: slidePattern 10s linear infinite;
}

@keyframes slidePattern {
    to { transform: translateX(100px); }
}

Common Pattern Library

Browser Compatibility

/* 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