How to add TITLE and ALT to an background image (CSS Sprites)?


Tags: html,css,css-sprites

Problem :

In my project I had used CSS sprites as there was lots of images,now our SEO team was saying that images should have ALT and TITLE tag. I know Title & ALT can't be added on the background. So they come up with an idea that put an transparent image in html over those images in background, but it seems very illogical to me(If the image is not relevant with the keyword, then how does it matter). So please help me with this, what is the best practice for this with very logical reason in support of your answer? so I can handle the SEO team.



Solution :

I would say do not use transparent images since earlier versions of IE do not support them nicely. You will see black blocks. But this is avoidable with some javascript hacks.

If they are just background images that don't add to the meaning of the site, keep it as just a background image, but if the image adds meaning to the site you should really use img tags and use alt tags as they suggest. Alt tags help with SEO.


    CSS Howto..

    how to build a triangular slider? [closed]

    CSS (or jQuery): How to set horizontal scrollbar in the middle position?

    HOW to combine two element that has different parent in CSS? [duplicate]

    How to find out and get rid of unused CSS code? [closed]

    How to make a multi-tiered dropdown menu with HTML and CSS only (maybe tiny JavaScript)

    How to read minified CSS?

    showing
    inside :before element

    How to center images vertically these divs?

    How to use media queries in css

    How to use CSS spinner in Angular2 while loading asynchronous list?

    How to change content of a div after link click using CSS :target?

    How to make table borders invisible with CSS

    How to select label tags that do not have a span inside them using css

    How to get divs and anchors stacked on top of each other with the same width

    How to apply the grayscale jquery plugin to a background image?

    How can I make two divs stack whilst still having my text wrap without media queries

    How to disable custom animations from click, angular?

    How to vertically align a DIV next to an image?

    How to prevent ALT text showing on cursor hover over image?

    How to switch between custom css layout and bootstrap css layout

    How to handle the html and css of one side image and other side content and vice versa

    How to make a ruler scale in HTML and CSS

    Android Layout, how to make a radius and border like css

    CSS - How to show only a % of the top div with two identicals divs stacked over each other

    How to change the size of an image inside a div without changing the div size

    How can I specify a *.css file in an ASP.NET UserControl?

    How to pause a CSS keyframe animation when it ends the first cycle?

    How to move nagivation bar to more to the right to fit a logo left of the bar

    How to have an image zoom in and out automatically in the background

    How to set css to more selectors when one of it is $(this)?