Background Image Gotchas & Solutions

Gotcha 1: Image Tiling or Poor Scaling

If `bg-cover` is forgotten, or `bg-no-repeat` is not used with smaller images or other `bg-size` utilities like `bg-contain`, the background image might tile or scale unexpectedly.

Problem: Tiling (Default Behavior)

Tiled (150x100 img)

A small image (150x100) tiles by default without `bg-no-repeat`.

Solution: `bg-no-repeat` and/or `bg-cover`

`bg-no-repeat bg-contain bg-center`

Using `bg-no-repeat` (here with `bg-contain` & `bg-center`) prevents tiling.

To avoid tiling/scaling issues: Use `bg-cover bg-center` for responsive full backgrounds. If you need the image to fit without cropping, use `bg-contain bg-center bg-no-repeat`.

Gotcha 2: Background Image Not Visible

A background image won't be visible if its containing element has no content that gives it dimensions, or no explicit height/width (e.g., `h-48`). Background images do not contribute to an element's computed size.

Problem: Element has no height

Collapsed or only border visible

Div is collapsed (or nearly so), making the background image invisible.

Solution: Add dimensions to the element

Visible with `h-56 bg-cover`

With `h-56`, the div has height, and the background image is visible.

To ensure visibility: Always give elements with background images explicit dimensions (e.g., `h-64`, `min-h-screen`) or ensure they contain content that defines their size.