Background size and position in Tailwind - Mini Project: Build & Apply

Background size and position with Tailwind CSS

📖 Scenario: You are creating a simple webpage section that uses a background image. You want to control how the background image fits and where it is placed inside the section.

🎯 Goal: Build a webpage section with a background image using Tailwind CSS. You will set the background size to cover the entire section and position the background image to the center.

📋 What You'll Learn

Create a <section> element with a background image using Tailwind CSS classes

Add a Tailwind class to set the background size to cover

Add a Tailwind class to position the background image at the center

Include accessible text inside the section describing the background

💡 Why This Matters

🌍 Real World

Background images are common in website headers, banners, and sections to create visually appealing layouts.

💼 Career

Knowing how to control background size and position with Tailwind CSS is useful for front-end developers building responsive and accessible web pages.

1

Create the section with a background image

Create a <section> element with the Tailwind class bg-[url('https://images.unsplash.com/photo-1506744038136-46273834b3fb')] to set the background image.

Tailwind

Hint

Use the Tailwind class bg-[url('...')] inside the class attribute of the <section> tag.

2

Add background size cover

Add the Tailwind class bg-cover to the <section> element to make the background image cover the entire section area.

Tailwind

  This section has a background image.
  

Hint

Add bg-cover next to the background image class inside the class attribute.

3

Add background position center

Add the Tailwind class bg-center to the <section> element to position the background image at the center.

Tailwind

  This section has a background image.

Hint

Add bg-center after bg-cover inside the class attribute.

4

Add height and accessibility text

Add the Tailwind class h-64 to the <section> element to give it height. Also, add an aria-label attribute with the value Background image section for accessibility.

Tailwind

  This section has a background image.

Hint

Add h-64 to the class list and add aria-label="Background image section" inside the <section> tag.

Practice

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