Taildev

bg-contain

Scale background images to fit completely within their container while preserving aspect ratio. Perfect for logos, product images, and any content where full visibility is essential.

background-size: containPreserves aspect ratioFull image visibility

bg-contain vs Other Sizing Options

bg-contain

Entire image visible, may have empty space

bg-cover

Fills container, may crop image

bg-auto

Original size, may repeat or be too small

Position Control with bg-contain

bg-top

Top aligned

bg-center

Center aligned

bg-bottom

Bottom aligned

Position the contained image within the available space

When to Use bg-contain

✅ Perfect For

  • • Company logos and branding
  • • Product images in galleries
  • • Illustrations and artwork
  • • Icons that need full visibility
  • • Charts and diagrams
  • • Screenshots and mockups

❌ Avoid When

  • • You need to fill the entire container
  • • Empty space around image is undesirable
  • • Working with decorative backgrounds
  • • Image cropping is acceptable
  • • Creating hero sections
  • • Pattern or texture backgrounds

Logo Showcase Examples

Square Logo

Perfect fit in square container

Wide Logo

Letterboxed to maintain ratio

Tall Logo

Pillarboxed to maintain ratio

Technical Details

How bg-contain Works

The bg-contain class scales the background image to fit entirely within the container:

  • • Scales image to largest size that fits completely
  • • Maintains original aspect ratio
  • • May leave empty space (letterboxing/pillarboxing)
  • • Entire image remains visible

CSS Output

.bg-contain {
  background-size: contain;
}

/* Common combinations */
.bg-contain.bg-no-repeat.bg-center {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

Responsive Behavior

Responsive Sizing

<!-- Different behaviors per breakpoint -->
<div class="bg-auto sm:bg-contain lg:bg-cover"></div>

<!-- Mobile-first approach -->
<div class="bg-contain md:bg-cover"></div>

<!-- Position adjustments -->
<div class="bg-contain bg-center sm:bg-top lg:bg-bottom"></div>

Mobile Considerations

  • • Ensure logos remain readable on small screens
  • • Consider minimum size requirements
  • • Test letterboxing appearance on mobile
  • • Use appropriate fallback backgrounds
  • • Consider switching to bg-cover for hero images
  • • Optimize for touch-friendly interactions

Performance & Best Practices

Optimization Strategies

  • • Use SVG for logos and simple graphics
  • • Provide multiple image sizes for different containers
  • • Consider the container's aspect ratio when choosing images
  • • Use appropriate background colors for empty space
  • • Optimize images for the largest display size needed
  • • Test visibility across different screen sizes

Common Patterns

<!-- Logo with background -->
<div class="w-32 h-16 bg-contain bg-no-repeat bg-center bg-white/10"
     style="background-image: url('logo.svg')">
</div>

<!-- Product image -->
<div class="aspect-square bg-contain bg-no-repeat bg-center bg-gray-100"
     style="background-image: url('product.jpg')">
</div>

Related Background Classes

Size

bg-auto
bg-contain
bg-cover

Position

bg-center
bg-top
bg-bottom
bg-left
bg-right

Repeat

bg-repeat
bg-no-repeat
bg-repeat-x
bg-repeat-y

Attachment

bg-fixed
bg-local
bg-scroll