Tailwind CSS Academy · Lesson

Background Size, Position, and Repeat

Control how background images display using bg-cover, bg-contain, bg-center, and bg-no-repeat utilities.

Background Images in Tailwind

Tailwind does not apply background images directly (since image URLs cannot be expressed as utility class names), but it provides full control over how background images behave: their size, position, and repeat behavior. You typically set the image via an inline style or a custom CSS class, then use Tailwind utilities to control its display properties.

<div
  style="background-image: url('hero.jpg');"
  class="w-full h-64 bg-cover bg-center bg-no-repeat">
</div>

bg-cover vs bg-contain

bg-cover and bg-contain are the two most important background size utilities. bg-cover scales the image as large as possible so the element is fully covered, cropping if necessary — ideal for hero images and full-bleed backgrounds. bg-contain scales the image to fit entirely within the element without cropping — ideal for logos and icons used as backgrounds.

<!-- Full-bleed hero: bg-cover -->
<div style="background-image: url('hero.jpg');" class="h-96 bg-cover bg-center">
  <!-- Image fills the entire div, may be cropped -->
</div>

<!-- Logo background: bg-contain -->
<div style="background-image: url('logo.svg');" class="h-32 w-32 bg-contain bg-center bg-no-repeat">
  <!-- Image fits inside without cropping -->
</div>

All lessons in this course

← Back to Tailwind CSS Academy