Background
Backgrounds are the visual surfaces behind elements, created using colors, images, or gradients to establish context, contrast, and visual structure in a layout.
Background image
Use bg-* utilities to apply a background image to an element.
HTML
<div class="h-48 w-full bg-[url('/images/mountain.avif')] bg-cover bg-bottom rounded-lg"></div>Linear gradient
Use bg-gradient-* or bg-linear-* utilities to create linear gradients.
HTML
<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-lg"></div>
<div class="h-14 bg-linear-120 from-emerald-400 to-green-600 rounded-lg"></div>
<div class="h-14 bg-linear-to-r from-rose-500 to-yellow-500 rounded-lg"></div>
<div class="h-14 bg-linear-to-t from-purple-500 to-pink-500 rounded-lg"></div>Radial gradient
Use bg-radial utilities to create circular or elliptical gradients.
HTML
<div class="size-24 rounded-full bg-radial from-pink-400 from-40% to-fuchsia-700"></div>
<div class="size-24 rounded-full bg-radial-[at_50%_75%] from-sky-200 via-blue-400 to-indigo-900 to-90%"></div>
<div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>Conic gradient
Apply bg-conic utilities to generate conic (angular) gradients.
HTML
<div class="size-24 rounded-full bg-conic from-blue-600 to-sky-400 to-50%"></div>
<div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div>
<div class="size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700"></div>Background image with overlay
Combine a background image with an overlay by stacking elements and using opacity utilities.
HTML
<div class="relative h-48 w-full bg-[url('/images/mountain.avif')] bg-cover bg-bottom rounded-lg">
<div class="absolute inset-0 bg-black/40 rounded-lg"></div>
<div class="relative z-10 flex h-full items-center justify-center text-white text-2xl font-semibold">
Background Image
</div>
</div>Background size
Use bg-contain to fit the entire image inside the container, or bg-cover to fill the container while preserving aspect ratio.
.bg-contain
.bg-cover
<!-- bg contain -->
<div class="bg-[url('/images/mountain.avif')] bg-contain ..."></div>
<!-- bg cover -->
<div class="bg-[url('/images/mountain.avif')] bg-cover ..."></div>Background position
Use bg-center, bg-right, bg-top-left, etc., to position a background image.
bg-top-left
bg-top
bg-top-right
bg-left
bg-center
bg-right
bg-bottom-left
bg-bottom
bg-bottom-right
<div class="bg-[url(/images/mountain.avif)] bg-top-left"></div>
<div class="bg-[url(/images/mountain.avif)] bg-top"></div>
<div class="bg-[url(/images/mountain.avif)] bg-top-right"></div>
<div class="bg-[url(/images/mountain.avif)] bg-left"></div>
<div class="bg-[url(/images/mountain.avif)] bg-center"></div>
<div class="bg-[url(/images/mountain.avif)] bg-right"></div>
<div class="bg-[url(/images/mountain.avif)] bg-bottom-left"></div>
<div class="bg-[url(/images/mountain.avif)] bg-bottom"></div>
<div class="bg-[url(/images/mountain.avif)] bg-bottom-right"></div>Background attachment
Use bg-fixed utility to fix the background image relative to the viewport.
Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?
Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.
<div class="bg-[url(/img/mountains.png)] bg-fixed ...">
<!-- ... -->
</div>Scrolling with the container
Use bg-local utility to scroll the background image with the container and the viewport.
Because the mail never stops. It just keeps coming and coming and coming, there's never a let-up. It's relentless. Every day it piles up more and more and more. And you gotta get it out but the more you get it out the more it keeps coming in. And then the barcode reader breaks and it's Publisher's Clearing House day.
<div class="bg-[url(/img/mountains.pmg)] bg-local ...">
<!-- ... -->
</div>Scrolling with the viewport
Use bg-scroll utility to scroll the background image with the viewport, but not with the container.
Because the mail never stops. It just keeps coming and coming and coming, there's never a let-up. It's relentless. Every day it piles up more and more and more. And you gotta get it out but the more you get it out the more it keeps coming in. And then the barcode reader breaks and it's Publisher's Clearing House day.
<div class="bg-[url(/img/mountains.png)] bg-scroll ...">
<!-- ... -->
</div>