Divs with image backgrounds vs. img tags

Question

I was wondering what is the best practice regarding divs with backgrounds and img tags. I understand that divs with backgrounds can have stuff on top of them and what not, but if its the case with just have an image, which is the preferred method? Maybe a better question is.. are img tags obsolete? When you have an image thats a link should you use an img tag or a div?

Thanks! Matt Mueller

Answer 1

Div backgrounds should be just that: background images for style. img tags should be for when you're displaying an actual image as an image itself, say you are showing a picture of something. you should use an image tag and not a div bg

Answer 2

Think about it as semantic markup:

1. If it is an "image" on the page, as far as the meaning of the page, use the img tag.

2. If it something that is not that significant to the page's meaning, ie. background image, use a background image on any sort of element (not just a div).

This difference really doesn't matter to how the page displays in most browsers, but has a different meaning to those who aren't interpreting the images visually.

Try to imagine how the elements will be interpreted by visually impaired.

There also may be a slightly different behavior by search engines-- I don't know whether search engines will pick up background images for their image search. If you really want the image out there, an img tag is safer.

Answer 3

is the image for layout or content?

if the image is layout related i would use CSS and have it in a div ...if its content related i would have it in an img ...

Hope that helps!

Answer 4

A good way to look at this is to view your site with stylesheets turned off. You'll quickly find out that all the DIV tags with background images do not appear. All of your IMG tag images are right where they should be. I would use DIV tags with background images for all aspects of site design and layout and use IMG tags for everything else.

IMG tags have alt properties and title properties. These are used in place of the image when it doesn't load or in place of the image in text only or screen reader type browsers.