How to add a Background Image using Tailwind CSS ?

To add a background image using Tailwind CSS, you can use the bg-[image-class] utility class, where [image-class] corresponds to a predefined set of background image classes. You also need to set the actual image URL using inline or external styles.

Syntax

<div class="bg-cover bg-center h-screen" 
         style="background-image: url('your-image-url.jpg');">
  <!-- Your content here -->
</div>

Classes

Classes	Description
bg-[image-class]	Defines background image properties with options such as cover, contain, center, and more, for styling backgrounds.
h-screen	Sets the height of the container to the full-screen height, making it occupy the entire vertical space of the viewport.
style Attribute	The inline style attribute is used to set the background image using the background-image property, providing specific image styling.

Key Features

• Background Image Options: Tailwind offers various background image classes (bg-cover, bg-contain, etc.) for different sizing and positioning options.
• Responsive Design: Easily create responsive background images using Tailwind’s responsive variants.
• Inline Styles: Incorporate inline styles for additional customization, such as setting the actual image URL.