Example 2: Background Image - Correct Implementation

Nature Scene

This div uses a background image with bg-cover and bg-center .

It also has h-96 to ensure the background is visible and has space.

bg-cover makes the image cover the entire area, potentially cropping.

bg-center positions the image from its center.

Another example with bg-cover , bg-center , and explicit bg-no-repeat .

bg-no-repeat is good practice, though often implied by bg-cover 's behavior of scaling to fill.

Use Tailwind's arbitrary value syntax for URLs: bg-[url('...')] .
Always give the element dimensions (e.g., h-64 , min-h-screen , or ensure content gives it height).
Use bg-cover to ensure the image fills the container without distortion (it may crop).
Use bg-center (or bg-top , bg-left , etc.) to control image positioning.
Consider bg-no-repeat if you don't want tiling, especially if not using bg-cover .