bg-repeat-x

Repeat the background image horizontally only. Perfect for creating horizontal borders, decorative strips, and patterns that flow from left to right.

Quick Reference

Class	Properties
`bg-repeat-x`	`background-repeat: repeat-x;`

Interactive Demo

Horizontal Repetition

Horizontal Pattern

Repeats left to right only

HTML Code

 <div class="h-64 bg-repeat-x bg-center" style="background-image: url(...)">
   <!-- Pattern repeats horizontally -->
 </div>

CSS Output

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

Repeat Direction Comparison

bg-repeat

X & Y

Both directions

bg-repeat-x

X only

Horizontal only

bg-repeat-y

Y only

Vertical only

Real-world Examples

Header Border

Website Header

Decorative border pattern repeats horizontally

 <header class="bg-repeat-x bg-bottom" style="background-image: url('border.svg')">
   <!-- Header content -->
 </header>

Navigation Strip

 <nav class="bg-repeat-x bg-center" style="background-image: url('dots.svg')">
   <!-- Navigation links -->
 </nav>

Vertical Position Control

bg-top

Top edge

Pattern at top

bg-center

Center

Pattern centered

bg-bottom

Bottom edge

Pattern at bottom

Combine bg-repeat-x with vertical position classes

When to Use bg-repeat-x

✅ Perfect For

• Horizontal borders and dividers
• Navigation bar backgrounds
• Header and footer decorations
• Timeline and progress indicators
• Horizontal pattern strips
• Ribbon and banner effects

🎯 Benefits

• Creates clean horizontal lines
• Works well with responsive widths
• Maintains vertical control
• Great for section separators
• Efficient for wide layouts
• Easy to position vertically

Horizontal Pattern Design

Design Considerations

• Ensure seamless horizontal edges
• Keep pattern height appropriate
• Test at different container widths
• Consider vertical alignment needs
• Optimize for performance
• Use appropriate contrast levels

CSS Pattern Examples

 <!-- Dotted line -->
 <div class="bg-repeat-x bg-center" style="
   background-image: radial-gradient(
     circle, #10b981 1px, transparent 1px
   );
   background-size: 10px 4px;
 "></div>

 <!-- Striped pattern -->
 <div class="bg-repeat-x" style="
   background-image: linear-gradient(
     to right, #10b981 50%, transparent 50%
   );
   background-size: 20px 100%;
 "></div>

Responsive Behavior

Responsive Patterns

 <!-- Responsive repeat direction -->
 <div class="bg-repeat-x md:bg-repeat lg:bg-no-repeat"></div>

 <!-- Responsive positioning -->
 <div class="bg-repeat-x bg-top md:bg-center lg:bg-bottom"></div>

Mobile Considerations

• Horizontal patterns work well on mobile
• Consider pattern scale for small screens
• Test scrolling performance
• Ensure readability over patterns
• Adjust background-size if needed
• Consider touch interaction areas