Backgrounds

Backgrounds

Background utilities control color, images, and size/position.

Background color

bg-<color>-<shade>:

<div class="bg-sky-500">...</div>

• With opacity: bg-sky-500/50.
• Arbitrary: bg-[#316ff6].
• CSS variable: bg-(--my-brand-color).

Background position

Background size

• bg-auto - natural size.
• bg-cover - cover the box.
• bg-contain - fit inside the box.

Background image

Use arbitrary values for images:

<div class="bg-[url('/hero.png')] bg-cover bg-center">...</div>

Background repeat

• bg-repeat, bg-no-repeat.
• bg-repeat-x, bg-repeat-y.
• bg-repeat-round, bg-repeat-space.

Background attachment & blend

• bg-fixed, bg-local, bg-scroll.
• bg-blend-*: bg-blend-multiply, bg-blend-overlay, etc.

Gradients

Gradient utilities use bg-linear-to-* in v4:

<div class="bg-linear-to-r from-sky-500 to-indigo-500">...</div>

• Directions: bg-linear-to-t, bg-linear-to-tr, bg-linear-to-r, bg-linear-to-br, bg-linear-to-b, bg-linear-to-bl, bg-linear-to-l, bg-linear-to-tl.
• Stops: from-, via-, to-*.
• Angles: bg-linear-45, bg-linear-[...].
• Opacity stops: from-sky-500/50.
• bg-radial, bg-conic for other gradient types.

TL;DR

• bg-sky-500 sets background color.
• bg-cover, bg-center, bg-[url(...)] handle images.
• Gradients: bg-linear-to-r from-sky-500 to-indigo-500.
• bg-blend-* controls blending.