If an element with a background image has no content that gives it height, or no explicit height/width, the background image may not be visible or only a sliver will show.
Incorrect (No Height):
Invisible content to give minimal height for demo
The red dashed outline shows the div. If it's just a line, the background image has no space to render.
Corrected (With Height):
Image visible due to
h-48
Here,
h-48
ensures space for the background.
bg-cover
/
bg-no-repeat
)
If an image is smaller than its container and
bg-cover
is not used, it might tile (repeat). If
bg-cover
is used, it scales to fill.
bg-no-repeat
explicitly prevents tiling.
Potentially Incorrect (Default behavior / Tiling with small image):
Above: A small 50x50 image is used. Without
bg-no-repeat
or
bg-cover
, it tiles by default.
Corrected (Using
bg-cover
):
bg-cover bg-center
Above:
bg-cover
scales the image to fill the container, preventing tiling and ensuring full coverage (may crop).
Corrected (Using
bg-no-repeat
without scaling):
bg-no-repeat bg-center
Above:
bg-no-repeat
shows the image once, centered. Useful if you don't want scaling but also no tiling.
h-64
,
min-h-[200px]
, or content that gives it height).
bg-no-repeat
to show it once, or
bg-cover
to scale it to fill the container (which also implies no repeat).
bg-cover
(or
bg-contain
for different scaling) and positioning classes like
bg-center
,
bg-top
, etc.