Backgrounds

The backgrounds utility classes in Tailwind CSS provide a set of tools for styling the background of an element. The background color classes will set the background color of an element, and you can specify the color by using one of the color variations, such as bg-red-500 for a red background.

In addition to the background color classes, Tailwind also provides a set of background image classes that can be used to add an image to the background of an element and change its behavior. You can specify the image behavior with classes such as bg-cover that will let the background image cover the entire element.

A neat little trick to insert an image as background directly is by the use of arbitrary values as follows:

<div class="bg-[url('/path/to/image.jpg')]">

Last but not least, there are utility classes for making a gradient color background and you can even clip the gradient to text! You can specify a direction for the gradient and up to three colors with the classes from-, via- and to-.