Taildev

bg-no-repeat

Display the background image only once without repetition. Perfect for hero images, logos, illustrations, and any content where a single instance is desired.

Quick Reference

ClassProperties
bg-no-repeatbackground-repeat: no-repeat;

Interactive Demo

Single Image Display

Single Instance

No repetition

HTML Code

<div class="h-64 bg-no-repeat bg-center" style="background-image: url(...)">
  <!-- Image appears only once -->
</div>

CSS Output

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

Repeat vs No-Repeat Comparison

bg-repeat

Multiple instances
background-repeat: repeat;

bg-no-repeat

Single instance
background-repeat: no-repeat;

Real-world Examples

Hero Section

Welcome

Single background image

<div class="bg-no-repeat bg-center bg-cover" style="background-image: url('hero.jpg')">
  <!-- Hero content -->
</div>

Logo Placement

Company Name

Logo displayed once

<div class="w-16 h-16 bg-no-repeat bg-center" style="background-image: url('logo.svg')"></div>

Position Combinations

bg-left-top

Top-Left

bg-center

Center

bg-right-bottom

Bottom-Right

Combine bg-no-repeat with position classes for precise placement

When to Use bg-no-repeat

✅ Perfect For

  • • Hero section backgrounds
  • • Logo and brand imagery
  • • Illustration placements
  • • Icon backgrounds
  • • Decorative elements
  • • Profile pictures and avatars

🎯 Benefits

  • • Clean, uncluttered appearance
  • • Better performance than repeated images
  • • Precise control over image placement
  • • Works well with background-size
  • • Ideal for responsive designs
  • • Maintains image aspect ratio

Size & Position Control

Background Size Options

<!-- Cover entire area -->
<div class="bg-no-repeat bg-cover"></div>

<!-- Contain within area -->
<div class="bg-no-repeat bg-contain"></div>

<!-- Custom size -->
<div class="bg-no-repeat" style="background-size: 200px 100px;"></div>

Common Combinations

bg-no-repeat bg-center bg-cover- Hero sections
bg-no-repeat bg-left bg-contain- Logo placement
bg-no-repeat bg-right-top- Decorative elements
bg-no-repeat bg-bottom- Footer graphics

Responsive Behavior

Responsive Adjustments

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

<!-- Responsive sizing -->
<div class="bg-no-repeat bg-contain md:bg-cover"></div>

Mobile Considerations

  • • Test image visibility on small screens
  • • Consider using bg-contain for mobile
  • • Adjust positioning for better UX
  • • Optimize image sizes for performance
  • • Ensure content remains readable
  • • Use appropriate fallback colors