Background Image - Gotcha Demonstration

Gotcha 1: Image Tiling/Scaling (Missing `bg-cover`)

Without `bg-cover`, the image might tile or not scale properly to fill the container. `bg-no-repeat` would prevent tiling but still might not scale well if the image is smaller than the container.

Incorrect (Potentially Tiled/Poorly Scaled - `bg-center` only):

Content over potentially poorly scaled/tiled image.

Correct (Using `bg-cover` and `bg-center`):

Content over properly covered image.

* Note: `bg-no-repeat` is often a good addition if you don't want any tiling, although `bg-cover` typically implies filling the space thus making tiling irrelevant unless the image is smaller than the viewport and `bg-fixed` is used.

Gotcha 2: Element Needs Dimensions

A background image will not be visible if the element it's applied to has no content or defined dimensions (height/width).

Incorrect (No dimensions, background image won't show):

The red-bordered box above might be collapsed or very thin because it has no dimensions for the background image to show.

Correct (With dimensions, e.g., `h-48`):

Background image is visible due to `h-48`.