« The Superlative CSS Editor
WotW: Hosts Widget »
Jul 15

HTML img versus CSS background-image

CSS

July's CSS Off! design presented quite a few more challenges than June's entry.

View my Early Bird WormSearch entry. (Yes, I know one of the headings is black. I would blame it on color-blindness, but it's a lie. It was just an oversight - I genuinely did not see it until posting today. Arg, I thought I had a fighting chance this time.)

For now, I am going to explain the semantics importance of utilizing HTML images versus CSS background-image.

Example 1:
Related Certain related worms feature a marker tag labeled "related" to the left of each related worm, as pictured here. Non-related worms lack such a marker tag. I initially coded this marker tag addition as a background image of a div.
View my initial markup of a normal bug versus related bug:

PLAIN TEXT
HTML:
  1. <!-- Normal Bug -->
  2.     <div class="bug">
  3.         <img src="assets/images/thumbs_03.jpg" alt="Earthworm" />
  4.         <h4><a href="#">Earthworm</a></h4>
  5.         <p class="tease">Earthworms Copy... [<a href="#">more</a>]</p>
  6.         <p class="meta">
  7.         <span class="timestamp">By 5:15 am</span> <span class="tags">Find Similar Worms by <a href="#">Region</a>, <a href="#">Season</a>, <a href="#">Flavor</a>, <a href="#">Size</a></span>
  8.         </p>
  9.     </div>
  10.  
  11. <!-- Related Bug -->
  12.     <div class="related bug">
  13.         <img src="assets/images/thumbs_07.jpg" alt="Earthworms High in Nutrition" />
  14.         <h4><a href="#">Earthworms High in Nutrition</a></h4>
  15.     <p class="tease">Earthworms Copy... [<a href="#">more</a>]</p>
  16.         <p class="meta">
  17.         <span class="timestamp">By 5:15 am</span> <span class="tags">Find Similar Worms by <a href="#">Region</a>, <a href="#">Season</a>, <a href="#">Flavor</a>, <a href="#">Size</a></span>
  18.         </p>
  19.     </div>

Note that the only thing really differentiating the two is the additional class "related" on the div. Initially, I applied a background image of the related marker on the .related.bug div. Now, suppose a user has CSS disabled: what meaning will they receive? For CSS disabled browsers, related bugs will be indistinguishable from normal bugs. This is terrible for accessibility - no bugs are related and an entire section of your site (and your effort coding) will now be overlooked.

I thus altered my copy to include an HTML image of the related marker, as follows:

PLAIN TEXT
HTML:
  1. <!-- Related Bug -->
  2.     <div class="related bug">
  3.         <img class="marker" src="assets/images/related.gif" alt="Related Bug" />
  4.         <img src="assets/images/thumbs_07.jpg" alt="Earthworms High in Nutrition" />
  5.         <h4><a href="#">Earthworms High in Nutrition</a></h4>
  6.     <p class="tease">Earthworms Copy... [<a href="#">more</a>]</p>
  7.         <p class="meta">
  8.         <span class="timestamp">By 5:15 am</span> <span class="tags">Find Similar Worms by <a href="#">Region</a>, <a href="#">Season</a>, <a href="#">Flavor</a>, <a href="#">Size</a></span>
  9.         </p>
  10.     </div>

This way, a browser with CSS disabled can still view the semantic meaning of the related bug. The markup for the image can be dished out on the server side when the page is requested.

Be friendly to people with different browsers - they may account for a greater percentage of your client base than you may realize!

Related articles to follow:

This entry was posted on Sunday, July 15th, 2007 at 9:28 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “HTML img versus CSS background-image”

  1. örnekleri dersleri Says:
    June 23rd, 2008 at 2:30 am

    HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

Leave a Reply