0

When querying an API that may or may not have an image, what are the main differences in setting the background-image or actually creating an img tag? 

<div class="img" style="background-image:url(...)"></div>

vs

<div class="img"><img src="..." alt="#" /></div>
Filburt
  • 17,626
  • 12
  • 64
  • 115
cusejuice
  • 10,285
  • 26
  • 90
  • 145
  • 1
    By what criteria do you wish to evaluate "better"? E.g. consistent appearance across browsers, ease of maintenance, ease of styling to achieve a certain appearance, etc. – RobG Nov 25 '13 at 23:34

3 Answers3

0

The second makes the background selectable, which can harm design. And it can harm the positioning, too. Imho there is not always the first to use. And from external css.

peterh
  • 11,875
  • 18
  • 85
  • 108
0

A broken image tag may show if the image doesn't exist. It will also fire an 'error' event. See http://css-tricks.com/snippets/jquery/better-broken-image-handling/

A broken background-image would fail a little more 'silently.'

Kevin C.
  • 2,499
  • 1
  • 27
  • 41
0

A background image is a presentational detail.

A foreground image is content.

If the image changes the readers' understanding of the document then it should be an <img>. If it is only decorative it should be applied with CSS.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335