What is the advantage of using a background image in a div instead of the classic <img> to create an image with a link?
I know the classic way to use a tag
<picture>
<a href="#top-test">
<img src="images/sample.gif" style="float:left" alt="Demo">
</a>
</picture>
But I found a website, using only divs instead and using background-image all the time to display the image.
Are there any advantages or reasons why they do this? This is due to the fact that it’s easier to place two images that are dynamically displayed when you hover over “bid now” and “watchlist”
<div class="category-image">
<a href="/catalog_items/571200">
<div class="lot-thumb" data-original="http://s3.amazonaws.com/images.charitybuzz.com/images/135744/home_page_thumb.jpg?1401827702" style="display: block; background-image: url(http://s3.amazonaws.com/images.charitybuzz.com/images/135744/home_page_thumb.jpg?1401827702);">
</div>
</a>
<a class="button important item-bidder hide-for-medium-down" href="/catalog_items/571200">Bid Now</a>
<a class="button important item-watcher hide-for-medium-down" href="/catalog_items/571200/toggle_watch" data-item-id="571200" data-view="watcher">+ Watchlist</a>
</div>
To check: taken from http://www.charitybuzz.com/ ?
thank
+4
1