Background

A selection of background utilities: color classes, gradients, positions, sizes, and repeat controls.

Background colors

bg-primary

bg-secondary

bg-success

bg-danger

bg-warning

bg-info

bg-light

bg-dark

When using a colored background, pair it with an appropriate text color (e.g. .text-white on .bg-primary).

Gradients are real images — use .bg-gradient-{color} helpers (see elevation/color helpers) or these Tailwind-style options.

Control the background with utility classes:

Utility	CSS property	Values
`.bg-position-*`	background-position	top · center · bottom · left · right
`.bg-size-*`	background-size	auto · cover · contain
`.bg-repeat-*`	background-repeat	no-repeat · repeat · repeat-x · repeat-y

<div class="bg-size-cover bg-position-center p-5 bg-hero-pattern"></div>

Use .bg-opacity-{10|25|50|75|100} to layer alpha onto a primary-tinted background.

100