2

Result is the same, but I guess there is difference between using img tag src attribute in HTML for setting image and styling image in CSS. For example:

In HTML:

<img src="//notrealdomain.com/some.png">

and

In HTML:

<img id="my-pic" src="">

In CSS:

#my-pic {
    background-image: url(//notrealdomain.com/some.png)
}
Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Djuka
  • 505
  • 5
  • 19
  • possible duplicate of [When to use IMG vs. CSS background-image?](http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image) – Alexander O'Mara Mar 28 '15 at 04:30
  • I feel like the possible duplicate post is more about strategy, and this is more about technical differences. The OP suggests that the "Result is the same", but this is not true at all, and the other post doesn't address these inherent style differences. On one hand, I do feel like this question is poorly researched, but on the other, I believe it to be useful and clear. I imagine the selected answer will be a good resource for others who have the same interest in the technical, as opposed to strategic, differences. – gfullam Mar 28 '15 at 04:41
  • Your post doesn't appear to have been officially marked as a duplicate; if so, the title would be appended with [Duplicate]. But @Alexander was bringing up the possibility as many judicious high ranking members of the community would do. See: [Why are some questions marked as duplicate?](http://stackoverflow.com/help/duplicates) – gfullam Mar 28 '15 at 06:58
  • @gfullam, it was poorly researched, although in the "Result is the same" part cache kinda tricked me. Quick question. What needs to be done for this question to not be marked as duplicate? I am new and inexperienced in the ways of Stack Overflow. Also, should I edit out my question (like removing that part "Result is the same")? – Djuka Mar 28 '15 at 07:00
  • No need to edit your question to remove the original wording, especially since that wording has been pointed out in comments. If you wanted to show research that you did prior to asking, you could add explanations of search terms you tried or links to other similar questions on SO that you already checked that didn't provide the exact answer you were looking for. – gfullam Mar 28 '15 at 07:04
  • You should, however, accept one of the below answers as a solution if it adequately answers your question. ;) – gfullam Mar 28 '15 at 07:05

3 Answers3

2

Let us see by comparison.

It isn't enough to simply supply a background-image property, because the img element has no inherent height or width and the background-image property can't provide that automatically in the same way that setting the src attribute does. So, without declared dimensions, the CSS-applied image doesn't show.

#my-pic {
    background-image: url(//placehold.it/150);
}
<img src="//placehold.it/150" />
<img id="my-pic" src="" />

You can force the img tag to have width and height equal to that of the background-image, if you want it to behave similarly to a src-applied image. Note: In some browsers, a broken image placeholder icon will be displayed on top of the background-image.

#my-pic {
    display: inline-block;
    width: 150px;
    height: 150px;
    background-image: url(//placehold.it/150);
}
<img src="//placehold.it/150" />
<img id="my-pic" src="" />

But this has limitations that the native img and src attribute combination don't have, such as the ability to define just the height or width and retain natural constraints.

#my-pic {
    display: inline-block;
    width: 150px;
    background-image: url(//placehold.it/300);
}
<img src="//placehold.it/300" width="150" />
<img id="my-pic" src="" />

Also, setting the width and height to anything other than natural dimensions, will just crop the background-image, instead of force-constraining it the way img behaves natively.

#my-pic {
    display: inline-block;
    width: 300px;
    height: 150px;
    background-image: url(//placehold.it/300);
}
<img src="//placehold.it/300" width="300" height="150" />
<img id="my-pic" src="" />

There are other properties you can use to achieve various results, such as background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size.

But if you're employing these styles, you probably shouldn't use an img tag as your container; a div or some other type of containing element with semantic meaning would be better suited for the job.

Regarding alt text, if an image that is defined in the src attribute fails to load, the value of alt attribute is shown as expected; whereas an alt attribute given to the CSS-applied image is displayed at all times and adjusts the alignment of the inline-block element based on the text baseline.

#my-pic {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-image: url(http://placehold.it/150);
}

#my-pic-failed {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-image: url(//failedtoload.png);
}
<img src="http://placehold.it/150" alt="Alternate text"/>
<img src="//failedtoload.png" alt="Alternate text"/>
<img id="my-pic" src="" alt="Alternate text" />
<img id="my-pic-failed" src="" alt="Alternate text" />
gfullam
  • 11,531
  • 5
  • 50
  • 64
0

The main difference between the two is that, one is used for background(css) and another is used for foreground(html).

Foreground Image (i.e. <img> tag) = content

Background Image (i.e. image specified in CSS) = design

Read the full article from the following link.

aqueel aboobacker v p
  • 1
0

by using img tag you can set both background and foreground image but by using css you can only set background image. and all other attributes can be set in both inline css and external css

Tanya Sinha
  • 604
  • 6
  • 15