|
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.
|
