I am familiar with the traditional method of using the picture tag.
<picture>
<a href="#top-test">
<img src="images/sample.gif" style="float:left" alt="Demo">
</a>
</picture>
However, I recently came across a website that uses only divs and background-images to display images instead.
Is there any specific advantage or reason for doing this? Perhaps it is easier for them to incorporate dynamic images, such as 'bid now' and 'watch list' on hover.
<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>
Could you verify if this code is from ?
Thank you!