How to change background image of div in tailwind

 You can change the background image of a div using the bg-cover and bg-center utility classes in Tailwind CSS. To do this, you'll need to add a style attribute to the div and set the background-image property to the URL of your desired image.

Here's an example:

css
<div class="bg-cover bg-center h-64 w-full" style="background-image: url('your-image-url.jpg');"> </div>

The bg-cover class sets the background image to cover the entire div, and the bg-center class centers the background image within the div. The h-64 and w-full classes set the height of the div to 64 units and the width to the full width of the container, respectively.

You can adjust the height and width of the div as needed, and you can also set different background image positions using other bg-* utility classes. For example, you can use the bg-top class to align the background image to the top of the div.

Post a Comment

Previous Post Next Post