HTML and CSS Reference
In-Depth Information
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.
