Backgrounds do more than fill a box with a color. Tailwind lets you place and size background images, build linear, radial and conic gradients, clip a gradient to text, and control how <img> elements fit their containers. In this lesson you will learn those utilities and the v4 gradient naming, so you can build hero sections and media cards without custom CSS.
Tailwind has no built-in image URLs, so background images are usually set with an arbitrary value or a theme variable. The sizing and positioning utilities are what you use every day:
<div class="h-64 bg-[url('/img/hero.jpg')] bg-cover bg-center bg-no-repeat"></div>
<div class="h-64 bg-(image:--pattern) bg-repeat bg-size-[40px_40px]"></div>| Utility | Property | Common values |
|---|---|---|
| bg-cover, bg-contain, bg-auto | background-size | Fill, fit, natural |
| bg-center, bg-top, bg-left-bottom | background-position | Nine anchor points |
| bg-no-repeat, bg-repeat-x | background-repeat | Tile control |
| bg-fixed, bg-scroll | background-attachment | Parallax effects (desktop only) |
A gradient is built from a direction utility plus color stops. v4 renamed the direction classes from bg-gradient-to-* to bg-linear-to-* and added angle support:
<div class="bg-linear-to-r from-cyan-500 to-blue-500">Left to right</div>
<div class="bg-linear-to-t from-gray-900 to-transparent">Fade into a photo</div>
<div class="bg-linear-45 from-amber-300 via-orange-500 to-red-600">45 degree angle</div>
<div class="bg-linear-to-r from-blue-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%">Positioned stops</div>Directions accept the eight compass points (to-t, to-tr, to-r, …) or any angle such as bg-linear-135. Each stop (from-, via-, to-) takes any palette color, the opacity modifier (to-black/0) and an optional position. Because stops are separate utilities, you can change a single stop at a breakpoint or on hover: hover:from-cyan-400.
A modifier such as bg-linear-to-r/oklch changes the interpolation space, which gives more vivid mid-tones when the two ends are far apart.
Radial and conic gradients use the same stop utilities with a different shape class:
<div class="size-48 rounded-full bg-radial from-white to-sky-500">Soft sphere</div>
<div class="h-40 bg-radial-[at_25%_25%] from-yellow-200 to-orange-500">Offset center</div>
<div class="size-48 rounded-full bg-conic from-red-500 via-blue-500 to-red-500">Color wheel</div>
<div class="h-24 bg-conic-180 from-gray-200 to-gray-800">Rotated conic</div>bg-radial-[at_<x>_<y>] moves the origin away from the centre and bg-conic-<angle> sets the starting angle.
Gradient text is the same gradient plus two utilities: bg-clip-text clips the background to the glyphs and text-transparent lets it show through, as in the sample code above.
Real photos rarely match the box they are placed in. aspect-* fixes the container's proportions and object-* decides how the image fills it:
<div class="aspect-video overflow-hidden rounded-lg">
<img class="size-full object-cover" src="team.jpg" alt="Team photo" />
</div>
<img class="size-24 rounded-full object-cover object-top" src="portrait.jpg" alt="" />
<img class="h-48 w-full object-contain bg-gray-100" src="logo.svg" alt="Logo" />aspect-video (16 / 9) and aspect-square are built in; any ratio works as aspect-3/2 or aspect-[4/5]. object-cover crops to fill, object-contain letterboxes, and object-<position> chooses which part survives the crop.
bg-gradient-to-r; in v4 it is bg-linear-to-r. The old name still works for compatibility, but new code should use the new one.text-transparent on gradient text, which leaves the solid text color on top of the gradient.h-full on an image without object-cover, which stretches it.Which utility set produces a gradient that runs from the top-left corner to the bottom-right corner?
bg-[url()] values plus bg-cover, bg-center and bg-no-repeat.bg-linear-to-* or bg-linear-<angle>, with bg-radial and bg-conic for other shapes.from-, via-, to-) accept any color, opacity modifier and position, and can change per variant.bg-clip-text together with text-transparent.aspect-* on the container and object-cover/object-contain on the image.Next lesson: Layout Basics: Display, Overflow, Visibility and Text Clamping — control how elements render, scroll, hide and truncate before diving into flexbox and grid.