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.

Use the <img> tag when you want to display a standalone image that is an essential part of the content on the page. This is particularly true when you want search engines to be able to index and display the image in search results. The <img> tag has several attributes that allow you to specify the image source, alt text, and other properties that are important for accessibility and SEO.

Use the CSS background-image property when you want to display an image as a background for an element, such as a div or a section. This is useful when you want to add a decorative background image that is not essential to the content, or when you want to create complex layouts that use images as part of the design.

The choice between using the <img> tag and the CSS background-image property depends on the specific needs of your web page. In general, use the <img> tag when the image is an essential part of the content, and use the CSS background-image property when the image is used for decorative or design purposes.

Watch a 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>

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>

Any tag for the background image?

The HTML tag for adding a background image to an element is not a standalone tag, but it is an attribute called style. You can use this attribute to set the background-image property and specify the URL of the image file you want to use as a background.

How can I add background color to 'img' tag?

To add a background color to an <img> tag, you can use the CSS background-color property. However, keep in mind that this will only change the background color of the area around the image, not the image itself. If you want to change the color of the image itself, you would need to edit the image file using an image editor.

Here's an example of how to use the background-color property to add a background color to an <img> tag:

<!DOCTYPE html>
<html>
<head>
	<title>Image Background Color Example</title>
</head>
<body>
	<img src="https://images.pexels.com/photos/1766838/pexels-photo-1766838.jpeg?auto=compress&cs=tinysrgb&w=600" style="background-color: yellow; padding: 10px;">
</body>
</html>