Using sprites with IMG tag?

html css css-sprites html-validation
Ryan Peters picture Ryan Peters · Dec 2, 2010 · Viewed 49.3k times · Source

I understand how to use sprites, however, isn't a "src" attribute required for IMG tags? I could always use a SPAN or other tag and set the background/width/etc but it won't be semantically correct.

Basically, I'd like to omit the SRC for an IMG tag and use just sprites, but am concerned about the HTML not being technically valid because of it. Thanks.

Answer

wdev picture wdev · Jun 29, 2011

Using sprites doesn't necessarily mean you need to define them in css backgrounds. You can also use IMG tag sprites, to do so you need basically trim your image. There are two good articles explaining that technique:

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp

http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

Both CSS and IMG methods sure have their own benefits, so you need to figure out which one suits you better.

Related questions

use CSS sprites for list (<li>) background image

Is it possible to use CSS sprites for the list background image? Normally, I render my sprites with CSS like this: .sprite { background: url(sprite.png) no-repeat top left;} .sprite-checkmark { background-position: 0 -24px; width: 24px; height: 23px; } .sprite-comment { background-position: 0 -48…

Read More
Why use a sprite sheet rather than individual images?

One thing I have noticed on some sites is that they use one BIIIIIIIG image containing lots of little images, then use CSS background-position to define the coordinates of each image, rather than use individual images. Here's where I'm at: …

Read More
Positioning background image on form element with CSS sprites

I am trying to get a magnifying glass as the background for my input element. The magnifying glass icon is part of a CSS sprite that looks like this: To position it, I've used these properties: #search-form input[type="text"] { …

Read More