0
0
Tailwindmarkup~5 mins

Background size and position in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.