Taildev

bg-repeat-y

Repeat the background image vertically only. Perfect for creating vertical borders, sidebar decorations, and patterns that flow from top to bottom.

Quick Reference

ClassProperties
bg-repeat-ybackground-repeat: repeat-y;

Interactive Demo

Vertical Repetition

Vertical Pattern

Repeats top to bottom only

HTML Code

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

CSS Output

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

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

Sidebar Border

Navigation Menu

  • • Dashboard
  • • Projects
  • • Settings
  • • Profile
<aside class="bg-repeat-y bg-left" style="background-image: url('border.svg')">
  <!-- Sidebar content -->
</aside>

Timeline

Project Started

January 2024

First Milestone

March 2024

<div class="bg-repeat-y bg-left" style="background-image: url('timeline.svg')">
  <!-- Timeline events -->
</div>

Horizontal Position Control

bg-left

Left edge
Pattern at left

bg-center

Center
Pattern centered

bg-right

Right edge
Pattern at right

Combine bg-repeat-y with horizontal position classes

When to Use bg-repeat-y

✅ Perfect For

  • • Vertical borders and dividers
  • • Sidebar decorations
  • • Timeline indicators
  • • Column separators
  • • Vertical pattern strips
  • • Progress bars and meters

🎯 Benefits

  • • Creates clean vertical lines
  • • Works well with responsive heights
  • • Maintains horizontal control
  • • Great for layout structure
  • • Efficient for tall content
  • • Easy to position horizontally

Vertical Pattern Design

Design Considerations

  • • Ensure seamless vertical edges
  • • Keep pattern width appropriate
  • • Test at different container heights
  • • Consider horizontal alignment needs
  • • Optimize for scrolling performance
  • • Use subtle patterns for readability

CSS Pattern Examples

<!-- Vertical dots -->
<div class="bg-repeat-y bg-center" style="
  background-image: radial-gradient(
    circle, #a855f7 1px, transparent 1px
  );
  background-size: 4px 10px;
"></div>

<!-- Vertical stripes -->
<div class="bg-repeat-y" style="
  background-image: linear-gradient(
    to bottom, #a855f7 50%, transparent 50%
  );
  background-size: 100% 20px;
"></div>

Layout Integration

Card with Vertical Accent

Important Notice

This card has a vertical pattern accent on the left side.

Column Separator

Column A

Content for the first column goes here.

Column B

Content for the second column goes here.

Responsive Behavior

Responsive Patterns

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

<!-- Responsive positioning -->
<div class="bg-repeat-y bg-left md:bg-center lg:bg-right"></div>

Mobile Considerations

  • • Vertical patterns adapt well to mobile
  • • Consider pattern width for narrow screens
  • • Test with different content heights
  • • Ensure patterns don't interfere with text
  • • Adjust background-size for mobile
  • • Consider touch-friendly spacing