Backgrounds and Borders
Backgrounds
Background utilities set solid colors, control background images, and adjust opacity.
Background color and opacity
bg-{color}-{shade} sets a solid background. Add a slash to control opacity, e.g. bg-sky-600/50 is 50% opaque.
Example
<div class="space-y-2">
<div class="bg-sky-600 text-white p-4 rounded">Solid bg-sky-600</div>
<div class="bg-sky-600/40 p-4 rounded">40% opacity bg-sky-600/40</div>
</div>Background images
Use bg-cover, bg-center and bg-no-repeat to place an image (usually set via a style or arbitrary value). Overlay text with a semi-transparent layer for contrast.
Example
<div class="relative h-40 rounded-xl overflow-hidden bg-slate-700">
<div class="absolute inset-0 bg-black/40"></div>
<div class="relative flex items-center justify-center h-full text-white font-bold text-xl">Overlay text</div>
</div>