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
<div class="bg-primary text-white p-4 rounded demo-box-w10"><span>bg-primary</span></div>
<div class="bg-secondary text-white p-4 rounded demo-box-w10"><span>bg-secondary</span></div>
<div class="bg-success text-white p-4 rounded demo-box-w10"><span>bg-success</span></div>
<div class="bg-danger text-white p-4 rounded demo-box-w10"><span>bg-danger</span></div>
<div class="bg-warning text-white p-4 rounded demo-box-w10"><span>bg-warning</span></div>
<div class="bg-info text-white p-4 rounded demo-box-w10"><span>bg-info</span></div>
<div class="bg-light border p-4 rounded demo-box-w10"><span>bg-light</span></div>
<div class="bg-dark text-white p-4 rounded demo-box-w10"><span>bg-dark</span></div>When using a colored background, pair it with an appropriate text color (e.g. .text-white on .bg-primary).
Background gradients
Gradients are real images — use .bg-gradient-{color} helpers (see elevation/color helpers) or these Tailwind-style options.
Position, size, repeat
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>Background opacity
Use .bg-opacity-{10|25|50|75|100} to layer alpha onto a primary-tinted background.
25
50
75
100
<div class="bg-opacity-25 rounded p-4 demo-box-w8"><span>25</span></div>
<div class="bg-opacity-50 rounded p-4 demo-box-w8"><span>50</span></div>
<div class="bg-opacity-75 rounded p-4 demo-box-w8"><span>75</span></div>
<div class="bg-opacity-100 rounded p-4 demo-box-w8"><span>100</span></div>