how to add alt text and title attribute in a sprite

Hi,

I have number of images on my website. So to make the page load time faster, i have combined all images into one image using sprite method and placing individual images as a background-position in the CSS file where ever required.

I want to know if we can add alt text and title attribute to the CSS Sprite images ???

 

Short answer: no.

CSS images should really be used for decorative, aesthetic things, and "proper" images for those that are integral parts of the content and need things like alt tags.

A page background image, for example, does not need an alt tag.

 

But CSS images helpful for better page load time..

 

I guess, you would like to have keyword filled alt tag, Then priority needs to be set, define images can be backgroud and define images needs to have <img>.

if images are important and needs to host keyword enriched alt tag then not a good idea to used them as background. and as pointed by "kiramanic" bakcground-image is to be used for decorative, aesthetic things.

regarding loadtime - play around with your image size/quality may be

and if you are dire determine to have them as background and as well to have alt tags, then you can use a cheat. take transparent image and layer it on top of your background image using z-index. It's just an eyewash and involved more effort.

 

If performance is an issue you could look into solutions like lazy load, so images are only loaded when they're needed but you can still include them properly with alt and title tags.

 

If it will possible,It really great.Can anyone know about that ......

 

This is a very bad idea in terms of SEO if the images you have used are not part of the design elements.