When to use IMG vs. CSS background-image?

It's a black and white decision to me. If the image is part of the content such as a logo or diagram or person (real person, not stock photo people) then use the <img /> tag plus alt attribute. For everything else there's CSS background images.

The other time to use CSS background images is when doing image-replacement of text eg. paragraphs/headers.

4 years ago

I'm surprised no one's mentioned this yet: CSS transitions.

You can natively transition a div's background image:

#some_div {

    background-image:url(image_1.jpg);

    -webkit-transition:background-image 0.5s;

    / Other vendor-prefixed transition properties /

    transition:background-image 0.5s;

}

#some_div:hover {

    background-image:url(image_2.jpg);

}

This saves any kind of JavaScript or jQuery animation to fade an <img/>'s src.

4 years ago

If you have your CSS in an external file, then it's often convenient to display an image that's used frequently across the site (such as a header image) as a background image, because then you have the flexibility to change the image later.

For example, say you have the following HTML:

<div id="headerImage"></div>

...and CSS:

#headerImage {

    width: 200px;

    height: 100px;

    background: url(Images/headerImage.png) no-repeat;

}

A few days later, you change the location of the image. All you have to do is update the CSS:

#headerImage {

    width: 200px;

    height: 100px;

    background: url(../resources/images/headerImage.png) no-repeat;

}

Otherwise, you'd have to update the src attribute of the appropriate <img> tag in every HTML file (assuming you're not using a server-side scripting language or CMS to automate the process).

Also background images are useful if you don't want the user to be able to save the image (although I haven't ever needed to do this).

4 years ago

1. Use IMG if you intend to have people print your page and you want the image to be included by default.
1. Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.
Pragmatic uses of IMG*
1. Use IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people). —sanchothefat
2. Use IMG if you rely on browser scaling to render an image in proportion to text size.
3. Use IMG for multiple overlay images in IE6.
4. Use IMG with a z-index in order to stretch a background image to fill its entire window.
Note, this is no longer true with CSS3 background-size; see #6 below.
5. Using img instead of background-image can dramatically improve performance of animations over a
background.

*When to use CSS background-image
1. Use CSS background images if the image is not part of the content. —sanchothefat
2. Use CSS background images when doing image-replacement of text eg. paragraphs/headers. —sanchothefat
3. Use background-image if you intend to have people print your page and you do not want the image to be included by default. —JayTee
4. Use background-image if you need to improve download times, as with CSS sprites.
5. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
6. Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

4 years ago