background-image: A Photo Behind Anything
Use background-image to paint a picture behind any element. Learn the url() syntax and why a background image is not the same as an <img> tag.
Step 1 of 3
background-image puts a picture behind content
The background-image property paints an image behind whatever the element contains. The image does not affect the layout — your text, buttons and other elements stay where the box already put them. The picture is purely decorative paint.
You give it an image source with the url() function: background-image: url('photo.jpg');. The URL can be relative ('photo.jpg'), absolute ('https://...'), or a data URL.
Think of it this way: An
<img> tag is a photograph hung on the wall — it takes up its own space. A background-image is wallpaper — it covers the wall behind everything else, and the furniture sits in front of it.Web Standard
Decorative images belong in CSS. Meaningful images that convey information should stay as <img> tags so screen readers can describe them via the alt attribute.
Learn more on MDN
HTMLREAD ONLY
PREVIEW