Proper uses of IMG tag

Use IMG if you intend to have people print your page and you want the image to be included by default.
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

Use IMG if you intend to have people print your page and you want the image to be included by default.
Use IMG if you rely on browser scaling to render an image in proportion to text size.
Use IMG for multiple overlay images in IE6.
Using img instead of background-image can dramatically improve performance of animations over a background.

When to use CSS background-image

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

In short
Foreground = img.
Background = CSS background.