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

Need a 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.
  

Need a 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.

Need a 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.

Need a hint?

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