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

Class	Properties
`bg-repeat`	`background-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