Image with `bg-cover` & `bg-center`
style="background-image: url(...)"
: Sets the actual image (not a Tailwind class, but necessary).
h-96
(or other height utility): Provides height for the image to be visible.
(Addresses a gotcha!)
bg-cover
: Scales the image (while preserving its aspect ratio) to be large enough to completely cover the background area.
bg-center
: Centers the image within the element.
bg-no-repeat
: Ensures the image doesn't tile if it's smaller than the container (though `bg-cover` usually makes this redundant for tiling, it's good practice).
This demonstrates how to correctly apply a background image that fills its container and is properly displayed.