HTML and CSS Reference
Wait a sec, it seems
like we have two ways
to put images on a page. Is
background-image a replacement
for the <img> element?
No, the background-image property has
a very specific purpose, which is to set the
background image of an element. It isn't
for placing images in a page — for that, you
definitely want to use the <img> element.
Think about it this way: a background image
is pure presentation, and the only reason you
would use a background-image property is
to improve the attractiveness of your element.
An <img> element, on the other hand, is used
to include an image that has a more substantial
role in the page, like a photo or a logo.
Now, we could have just placed the image
inside the paragraph, and we could probably
get the same look and feel, but the guarantee
star is pure decoration — it has no real meaning
on the page, and it's only meant to make the
element look better. So, background-image
makes more sense.