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 Size, Position, and Repeat is a free Tailwind CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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>

bg-auto and Custom Sizes

bg-auto renders the background image at its natural pixel size — no scaling. This is useful when you want a precise, unscaled texture or pattern. For custom sizes that are not cover or contain, use arbitrary values: bg-[length:50%_auto] sets background-size to 50% width and auto height, useful for half-width background patterns.

<!-- Pattern tile at natural size -->
<div style="background-image: url('pattern.png');" class="h-64 bg-auto bg-repeat">
</div>

<!-- Custom background size via arbitrary value -->
<div style="background-image: url('texture.jpg');" class="h-64 bg-[length:200px_200px] bg-repeat">
</div>

Background Position Utilities

Background position controls where the image is anchored within its container. Tailwind provides nine positions matching a 3x3 grid: bg-top, bg-bottom, bg-left, bg-right, bg-center, and the four corners bg-top-left, bg-top-right, bg-bottom-left, bg-bottom-right. When used with bg-cover, position determines which part of the image is visible when cropping occurs.

<!-- Show the top of the image (portrait person photo) -->
<div style="background-image: url('person.jpg');" class="h-48 bg-cover bg-top"></div>

<!-- Show the center (landscape scenery) -->
<div style="background-image: url('landscape.jpg');" class="h-48 bg-cover bg-center"></div>

<!-- Show the bottom (ground-level details) -->
<div style="background-image: url('detail.jpg');" class="h-48 bg-cover bg-bottom"></div>

Arbitrary Background Position

For positions not covered by the nine presets, use arbitrary values: bg-[center_25%] anchors the image at the horizontal center and 25% down from the top. This is useful for carefully positioning a subject (like a face in a team photo) within a cropped card image. Always test how the image looks at different viewport sizes when using precise positions.

<!-- Team member card: position face in frame -->
<div
  style="background-image: url('team-member.jpg');"
  class="w-32 h-32 rounded-full bg-cover bg-[center_20%]">
</div>

Background Repeat Utilities

Background repeat controls whether the image tiles to fill the container. bg-repeat tiles in both directions (default behavior). bg-no-repeat shows the image exactly once. bg-repeat-x tiles only horizontally and bg-repeat-y only vertically. bg-repeat-round and bg-repeat-space offer advanced tiling that avoids cutting off tiles at the edges.

<!-- Tiled pattern background -->
<div style="background-image: url('dots.png');" class="h-64 bg-repeat">
</div>

<!-- Single decorative image in corner -->
<div style="background-image: url('corner-decor.svg');" class="h-64 bg-no-repeat bg-bottom-right">
  Main content here
</div>

Background Attachment: Fixed Parallax

bg-fixed makes the background image fixed relative to the viewport rather than the element — as the user scrolls, the content moves but the background stays still, creating a parallax effect. bg-local makes the background scroll with the element's content. bg-scroll (default) scrolls the background with the element but not with the content.

<!-- Parallax section -->
<div
  style="background-image: url('mountain.jpg');"
  class="h-96 bg-fixed bg-cover bg-center">
  <div class="h-full flex items-center justify-center">
    <h2 class="text-4xl font-bold text-white drop-shadow-lg">Parallax Hero</h2>
  </div>
</div>

Responsive Background Behavior

Background behavior often needs to change at different screen sizes. On mobile, an image might be better centered differently or use a smaller crop. Apply responsive prefixes to any background utility: bg-top md:bg-center centers the image on desktop but shows the top portion on mobile. This is important for maintaining the right focal point of background images at every viewport width.

<div
  style="background-image: url('hero.jpg');"
  class="h-64 md:h-96 bg-cover bg-top md:bg-center">
</div>

Building a Full-Page Background

A full-page background image is achieved by setting the image on a container that fills the viewport: min-h-screen for height, bg-cover bg-center bg-no-repeat bg-fixed for image behavior. Add a relative container inside for content so it layers above the background. Always add a semi-transparent overlay layer to ensure text remains readable over the image.

<div
  style="background-image: url('bg.jpg');"
  class="min-h-screen bg-cover bg-center bg-no-repeat relative">
  <!-- Dark overlay for text contrast -->
  <div class="absolute inset-0 bg-black/40"></div>
  <!-- Content above overlay -->
  <div class="relative z-10 flex items-center justify-center min-h-screen">
    <h1 class="text-5xl font-bold text-white">Welcome</h1>
  </div>
</div>

Using object-fit on img vs Background

When possible, use an <img> tag with object-cover and object-position instead of background images — this is better for accessibility (alt text), SEO (indexable images), and performance (browser-native lazy loading). Reserve background images for decorative patterns, textures, and cases where the image has no semantic meaning.

<!-- Prefer img with object-fit for content images -->
<div class="relative h-64 overflow-hidden rounded-xl">
  <img
    src="hero.jpg"
    alt="Mountain landscape at sunrise"
    class="absolute inset-0 w-full h-full object-cover object-center"
    loading="lazy"
  />
</div>

Tailwind Background Shorthand Recap

Here is a quick reference for the background utility families: bg-cover / bg-contain / bg-auto for size, bg-center / bg-top / bg-bottom / bg-left / bg-right for position, bg-no-repeat / bg-repeat / bg-repeat-x / bg-repeat-y for tiling, and bg-fixed / bg-local / bg-scroll for attachment. Most hero sections use bg-cover bg-center bg-no-repeat as a reliable baseline.

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

Lesson Recap

In this lesson you learned: bg-cover scales to fill the container while bg-contain fits inside without cropping, bg-center / bg-top / bg-bottom control which part of the image is anchored in the frame, and bg-fixed creates a parallax effect while bg-no-repeat prevents tiling. Next up we master Tailwind's spacing scale for margin and padding.

Frequently asked questions

Is the “Background Size, Position, and Repeat” lesson free?

Yes — the full text of “Background Size, Position, and Repeat” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Background Size, Position, and Repeat”?

Control how background images display using bg-cover, bg-contain, bg-center, and bg-no-repeat utilities. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Tailwind CSS Academy?

No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Background Size, Position, and Repeat” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Tailwind CSS Academy lesson?

Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Tailwind CSS Academy