4

I know the classic way of using tag

<picture>
  <a href="#top-test">
     <img src="images/sample.gif" style="float:left" alt="Demo">
  </a>
</picture>

But I found a website using instead just divs and using all the time background-image to display the image.

Is there any advantage or reasons they's do that ? It is because it's easier to put the two images that appear dynamically on hover 'bid now' and 'watch list'

<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);">
              &nbsp;
       </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: it is taken from http://www.charitybuzz.com/ ?

thanks

Marcin Nabiałek
  • 109,655
  • 42
  • 258
  • 291
Mathieu
  • 4,587
  • 11
  • 57
  • 112
  • @Notulysses well strange thing is their designers at Charitybuzz seem very good and they use css background image instead of the fact in the question you mention people say only to use it when the image is not part of the content, but only for small design details. But here the images it's used for are really the VERY content. Weird – Mathieu Jun 08 '14 at 14:57

1 Answers1

1

It lets you have actual text in the element (offset with CSS so people can't see it) instead of an alt attribute which is theoretically better food for search engines.

It also lets you use sprites (background images containing multiple pictures which are cropped with background-position, height and width) to reduce the numbers of HTTP requests being made for images.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • thanks, when you say "actual text", here what text it used in the example I show? – Mathieu Jun 08 '14 at 14:56
  • I'd also add the ability to define rollovers in the css where they belong, rather than relying on javascript to swap the img src out. – Rob Jun 08 '14 at 14:56
  • thanks yes i think the rollover is the main issue even if i'm surprized they accpet to lose a lot in terms o seo on their images – Mathieu Jun 08 '14 at 14:57
  • @Mathieu — In this example, the text is ` ` which is junk. Possibly you have encountered an instance of http://en.wikipedia.org/wiki/Cargo_cult_programming – Quentin Jun 08 '14 at 14:57
  • :) maybe.... thanks for your help merci! – Mathieu Jun 08 '14 at 14:58
  • @Mathieu — there is no rollover effect in the example you link to – Quentin Jun 08 '14 at 14:59
  • yes but there's a hover effect: the image 'bid on it' appears above the picture – Mathieu Jun 08 '14 at 15:00
  • It doesn't work for me. – Quentin Jun 08 '14 at 15:01
  • huh, if I make my browser window bigger, it starts to work … but that isn't a change in background image. It just repositions the two anchors that follow the div. – Quentin Jun 08 '14 at 15:02