When to Use HTML <img> Tag and CSS background-image Property

There are many situations when both the HTML <img> tag and CSS background-image property give the same visual outcome. But what is the difference between them? Well, in this snippet, we’re going to discuss the differences between them, after which you can make a better decision when using them.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

HTML <img> Tag

Use the <img> tag in the following cases:

When it is not just a design element, but also a part of the content, such as a diagram, logo, or a person.
When you expect that people will print your page and want the image to be included by default.
When you want to be indexed by the search engine. Google doesn’t index background images automatically. Browsers don’t provide any information on background images to assistive technology. But using the <img> tag with the alt and title attributes will help to be recognised by screen readers.
When the image has an essential semantic meaning (e.g., a warning icon). The use of an <img> tag will ensure that the meaning can be communicated in all user agents.
When you rely on browser scaling for rendering an image in proportion with the text size.
When you want to improve animation performance over a background.

Example of using the HTML <img> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Example</h2>
    <img src="https://images.unsplash.com/photo-1585409677983-0f6c41ca9c3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Nature" width="500" height="333">
  </body>
</html>

Try it Yourself »

CSS background-image Property

Use the CSS background-image property in the following cases:

If the image is only used for design.
If the image isn’t a part of the content.
If you expect that people can print your page, and don’t want the image to be included by default.
If you want to improve the download time (as with CSS sprites).
If you need to make visible only a part of the image.
If you want to make an image-replacement of a text.
If you need to stretch the background image to fill its whole window. Use with the background-size set to “cover”.
If there is a need to repeat images.

Let’s see an example with the background-image property, where it is used with the background-size property with the “cover” value.

Example of using the CSS background-image property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .image {
        background-image: url("https://images.unsplash.com/photo-1433838552652-f9a46b332c40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
        background-color: #cccccc;
        height: 500px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="image"></div>
  </body>
</html>