Background Color & Images

Set background colors and images, then control their size, position, and repeat behavior.

4 min read Level 1/5 #tailwind#color

What you'll learn

Use bg-{color} with opacity modifiers
Set background images and use bg-cover or bg-contain
Position with bg-center and bg-no-repeat

bg-* covers both flat fills and image backgrounds. The same palette and opacity rules from text color apply here too.

Background Color

<div class="bg-white dark:bg-gray-900">Themed surface.</div>
<div class="bg-blue-500/10 text-blue-700">A soft tinted callout.</div>
<button class="bg-[#1da1f2] text-white">Exact brand hex</button>

The /10 opacity tint is a clean way to make a subtle “info” panel without inventing a new color.

Background Images

Set an image with an arbitrary URL value, then control how it fills the box:

<header class="bg-[url(/hero.jpg)] bg-cover bg-center bg-no-repeat h-96">
  <h1 class="text-white text-5xl font-bold">Welcome</h1>
</header>

bg-cover fills the box, cropping as needed.
bg-contain fits the whole image, possibly leaving gaps.
bg-center keeps the focal point centered while it scales.

Attachment

bg-fixed pins the image to the viewport, producing a light parallax effect as you scroll past it:

<section class="bg-[url(/texture.jpg)] bg-cover bg-fixed">…</section>

Gradients →