Backgrounds
Background Size
Utilities for controlling the background size of an element's background image.
Quick reference
| Class | Description |
|---|---|
bg-auto | background-size: auto |
bg-cover | background-size: cover |
bg-contain | background-size: contain |
Basic usage
Auto
Use bg-auto to display the background image at its default size.
html
<div class="bg-auto bg-no-repeat bg-center bg-[url(...)] ..."/>Cover
Use bg-cover to scale the background image until it fills the background layer.
html
<div class="bg-cover bg-center bg-[url(...)] ...">Contain
Use bg-contain to scale the background image to the outer edges without cropping or stretching.
html
<div class="bg-contain bg-center bg-[url(...)] ..."></div>