When to use IMG vs. CSS background-image?

Answer 1

Do you need the image to take up space or do you want to write over it?

Answer 2

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.

Answer 3

Browsers aren't always set to print background images by default; if you intend to have people print your page :)

Answer 4

Here's a technical consideration: will the image be generated dynamically? It tends to be a lot easier to generate the <img> tag in HTML than to try to dynamically edit a CSS property.

Answer 5

Use CSS background-image in a case of multiple skins or versions of design. Javascript can be used to dynamically change a class of an element, which will force it to render a different image. With an IMG tag, it may be more tricky.

Answer 6

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).

Steve

Answer 7

About the same as sanchothefat's anwser, but from a different aspect. I always ask myself: if I may remove completely the stylesheets from the website, the remaining elements do only belong to the content? If so, I did my job well.

Answer 8

What about the size of the image? If I use the img tag, the browser scales the image. If I use css background, the browser just cuts a chunk from the larger image.

Answer 9

Foreground = img.

Background = CSS background.

Answer 10

Just to throw a spanner in the works - i'm of the opinion that you should never use the img tag. HTML was meant for content, not visual style. all the images on your page should come from the CSS, leaving your HTML code pure. (even if it does take a bit longer to build)

Answer 11

well....

Using a background image, you need to absolutely specify the dimensions. This can be a significant problem if you don't actually know them in advance or cannot determine them.

A big problem with <img> is overlays. What if I want an css inner shadow on my image (box-shadow:inset 0 0 5px rbg(0,0,0,.5))? In this case, since can't have child elements, you need to use positioning and add empty elements which equates to useless markup.

In conclusion, it's quite situational.

Answer 12

Use background images only when necessary e.g. containers with image that tiles.

One of the major PROS by using IMAGES is that it is better for SEO.