bg-repeat

The default background repeat behavior. Tiles the background image both horizontally and vertically to fill the entire element, creating seamless patterns and textures.

Quick Reference

ClassProperties
bg-repeatbackground-repeat: repeat;

Interactive Demo

Repeating Pattern

Pattern Repeats

Both X and Y directions

HTML Code

<div class="h-64 bg-repeat" style="background-image: url(...)">
  <!-- Pattern tiles in all directions -->
</div>

CSS Output

.bg-repeat {
  background-repeat: repeat;
}

Background Repeat Comparison

bg-repeat

X & Y
background-repeat: repeat;

bg-no-repeat

None
background-repeat: no-repeat;

bg-repeat-x

X only
background-repeat: repeat-x;

bg-repeat-y

Y only
background-repeat: repeat-y;

Real-world Examples

Pattern Background

Geometric Pattern

Perfect for decorative backgrounds and texture overlays

<div class="bg-repeat" style="background-image: url('pattern.svg')">
  <!-- Content over pattern -->
</div>

Texture Background

Dotted Texture

<div class="bg-repeat" style="background-image: url('texture.png')">
  <!-- Seamless texture -->
</div>

When to Use bg-repeat

✅ Perfect For

  • • Seamless pattern backgrounds
  • • Texture overlays and surfaces
  • • Decorative geometric designs
  • • Paper and fabric textures
  • • Subtle noise and grain effects
  • • Brand pattern implementations

🎯 Benefits

  • • Creates consistent visual texture
  • • Works with any element size
  • • Small file sizes for patterns
  • • Seamless tiling appearance
  • • Great for brand consistency
  • • Responsive by default

Pattern Creation Tips

Design Considerations

  • • Ensure seamless edges for tiling
  • • Keep pattern size optimized
  • • Test at different screen sizes
  • • Consider contrast with content
  • • Use subtle patterns for readability
  • • Optimize images for web

CSS Patterns

<!-- CSS-only patterns -->
<div class="bg-repeat" style="
  background-image:
    repeating-linear-gradient(45deg,
      #3b82f6 0px, #3b82f6 10px,
      transparent 10px, transparent 20px
    );
"></div>

Performance & Best Practices

Optimization Tips

  • • Use small, optimized pattern images
  • • Consider CSS patterns over images
  • • Test performance on mobile devices
  • • Use appropriate image formats (SVG, WebP)
  • • Avoid overly complex patterns
  • • Consider using background-size for scaling

Accessibility

  • • Ensure sufficient contrast with text
  • • Avoid patterns that cause visual strain
  • • Test with users who have visual sensitivities
  • • Provide option to disable patterns
  • • Consider reduced motion preferences
  • • Use semantic markup for content