Bird
Raised Fist0
Tailwindmarkup~5 mins

Background size and position in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Background size and position help you control how a background image looks inside a box. You can make it bigger, smaller, or move it around.

You want a background image to cover the entire area without stretching weirdly.
You want to show only part of a background image by moving it to a corner.
You want a small background image to repeat or stay fixed in one spot.
You want to make sure the background looks good on phones and computers.
You want to create a nice design by placing the background image exactly where you want.
Syntax
Tailwind
bg-[size] bg-[position]

Use bg-cover to make the background fill the area fully.

Use bg-center, bg-top, bg-bottom, bg-left, bg-right to move the background image.

Examples
This makes the background image cover the whole box and stay centered.
Tailwind
<div class="bg-cover bg-center bg-[url('/image.jpg')] h-64 w-64"></div>
This makes the background image fit inside the box without cutting, placed at the top.
Tailwind
<div class="bg-contain bg-top bg-[url('/pattern.png')] h-48 w-48"></div>
This shows the background image at its original size, placed at the bottom.
Tailwind
<div class="bg-auto bg-bottom bg-[url('/icon.svg')] h-32 w-32"></div>
Sample Program

This page shows three boxes with the same background image but different size and position settings using Tailwind CSS classes.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Background Size and Position Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center gap-6 p-6">
  <div class="bg-cover bg-center bg-[url('https://tailwindcss.com/_next/static/media/hero-pattern.7e1f7a3a.svg')] h-48 w-48 border border-gray-300 rounded">
    <p class="text-white text-center pt-16 font-semibold">Cover & Center</p>
  </div>
  <div class="bg-contain bg-top bg-[url('https://tailwindcss.com/_next/static/media/hero-pattern.7e1f7a3a.svg')] h-48 w-48 border border-gray-300 rounded">
    <p class="text-gray-700 text-center pt-16 font-semibold">Contain & Top</p>
  </div>
  <div class="bg-auto bg-bottom bg-[url('https://tailwindcss.com/_next/static/media/hero-pattern.7e1f7a3a.svg')] h-48 w-48 border border-gray-300 rounded">
    <p class="text-gray-700 text-center pt-16 font-semibold">Auto & Bottom</p>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Background size classes: bg-auto, bg-cover, bg-contain.

Background position classes: bg-center, bg-top, bg-bottom, bg-left, bg-right.

You can combine size and position classes to get the look you want.

Summary

Use Tailwind classes to control background image size and position easily.

bg-cover fills the area, bg-contain fits inside, bg-auto keeps original size.

Position classes move the image inside the box for better design.

Practice

(1/5)
1. Which Tailwind class makes a background image cover the entire element, possibly cropping parts of the image?
easy
A. bg-cover
B. bg-contain
C. bg-auto
D. bg-center

Solution

  1. Step 1: Understand background size classes

    bg-cover makes the background image fill the entire element, cropping if needed.

  2. Step 2: Compare with other classes

    bg-contain fits the whole image inside without cropping, bg-auto keeps original size, and bg-center is about position, not size.

  3. Final Answer:

    bg-cover -> Option A

  4. Quick Check:

    Full coverage = bg-cover [OK]
Hint: Cover fills area, contain fits inside, auto keeps size [OK]
Common Mistakes:
  • Confusing bg-cover with bg-contain
  • Thinking bg-center changes size
  • Using bg-auto to fill area
2. Which Tailwind class correctly sets the background image position to the top right corner?
easy
A. bg-top-right
B. bg-top-right is not a valid Tailwind class
C. bg-righttop
D. bg-top

Solution

  1. Step 1: Recall Tailwind background position classes

    Tailwind provides position classes like bg-top for top center, but does not have bg-top-right.

  2. Step 2: Understand other options

    bg-top sets top center, bg-righttop is invalid, and bg-top-right is not a valid Tailwind class.

  3. Final Answer:

    bg-top -> Option D

  4. Quick Check:

    Top right is not a valid class; top center = bg-top [OK]
Hint: Tailwind uses bg-top for top center; no bg-top-right class [OK]
Common Mistakes:
  • Using bg-top-right which is invalid
  • Mixing order of position words
  • Using invalid class names
3. What will be the visual effect of this Tailwind class combination on a div with a background image?
<div class="bg-contain bg-bottom bg-no-repeat w-64 h-64"></div>
medium
A. Background image keeps original size, centered, repeats
B. Background image covers the div, positioned at the bottom, repeats
C. Background image fits inside the div, positioned at the bottom, no repeat
D. Background image fits inside the div, centered, repeats

Solution

  1. Step 1: Analyze background size

    bg-contain makes the image fit inside the div without cropping.

  2. Step 2: Analyze position and repeat

    bg-bottom places the image at the bottom, and bg-no-repeat prevents repeating.

  3. Final Answer:

    Background image fits inside the div, positioned at the bottom, no repeat -> Option C

  4. Quick Check:

    Contain + bottom + no-repeat = Background image fits inside the div, positioned at the bottom, no repeat [OK]
Hint: Contain fits, bottom moves image down, no-repeat stops repeats [OK]
Common Mistakes:
  • Confusing bg-contain with bg-cover
  • Ignoring bg-no-repeat effect
  • Assuming default center position
4. Identify the error in this Tailwind class usage for background size and position:
<div class="bg-auto bg-center bg-cover"></div>
medium
A. Using both bg-auto and bg-cover together causes conflict
B. bg-center is invalid for background position
C. Missing bg-no-repeat causes image to repeat
D. The classes are correct and will work as expected

Solution

  1. Step 1: Understand background size classes conflict

    bg-auto keeps original size, bg-cover fills the area. Using both together conflicts because they set different sizes.

  2. Step 2: Check position and repeat classes

    bg-center is valid for position, and bg-no-repeat is optional; its absence doesn't cause an error.

  3. Final Answer:

    Using both bg-auto and bg-cover together causes conflict -> Option A

  4. Quick Check:

    Conflicting size classes = Using both bg-auto and bg-cover together causes conflict [OK]
Hint: Don't combine conflicting size classes like bg-auto and bg-cover [OK]
Common Mistakes:
  • Thinking bg-center is invalid
  • Assuming missing bg-no-repeat is an error
  • Ignoring class conflicts
5. You want a background image that fits fully inside a responsive card, stays at the top left corner, and never repeats. Which Tailwind classes should you use together?
hard
A. bg-cover bg-top-left bg-no-repeat
B. bg-contain bg-top-left bg-no-repeat
C. bg-auto bg-left-top bg-repeat
D. bg-contain bg-center bg-repeat

Solution

  1. Step 1: Choose background size to fit fully inside

    bg-contain fits the entire image inside without cropping, perfect for responsive cards.

  2. Step 2: Set position and repeat

    bg-top-left places image at top left corner, and bg-no-repeat prevents repeating.

  3. Final Answer:

    bg-contain bg-top-left bg-no-repeat -> Option B

  4. Quick Check:

    Contain + top-left + no-repeat = bg-contain bg-top-left bg-no-repeat [OK]
Hint: Contain fits inside, top-left positions, no-repeat stops repeats [OK]
Common Mistakes:
  • Using bg-cover crops image
  • Confusing bg-top (top center) with top left
  • Forgetting bg-no-repeat to stop repeats