Modern CSS with Tailwind, 2nd Edition

Background Images

CSS has a lot of properties for displaying a background image, and Tailwind provides utilities for almost all of them.

Specifying Images

If you want a background image that comes from a URL, Tailwind provides utilities for how that image is displayed but not for the URL itself. You have three options for specifying the background image URL: you can use the style= attribute of the DOM element, as in <div style="background-image: url(whatever)"> </div>, or you can use the arbitrary syntax and surround it in square brackets, as in class="[background-image:url({url})]". Finally, you can create your own CSS utility classes:

.bg-pattern-image {
  background-image: url(whatever);
}

Positioning

When you have a background image, you ...