insert the image in css

[johmny]

hello to all the members of daniweb
My Question is if we insert the image in css, so how can I add the alt attribute or other property which will work like the alt text. Because alt text attributs are important for the seo. But Alt attribute is the tag of the html not css.

Background images in css aren't really meant to be used as images (tag-wise) in HTML, but you can use css (and js possibly) to fill a container with a background image. You can add a title attribute to the container tag.

[JorgeM]

So to add to diafol's comments, with regard to images the alt tag is not only important for SEO but also for also for users with visual disabilities. The alt tag should be used to populate text that is a description of the image. The text can then be read aloud to blind users on a screen reader.

When you use an image as a background, the image serves a different purpose. As a background image, how do you expect it to benefit your SEO? Your element that contains this background image may/should/would have appropriate text.

I can understand the old "image replacement" trick, but as Jorge states, the original tag text content should cover that.

If you use css background sprites for standalone icons (no-text), that's a bit more tricky. Ideally they'd be images in their own right, but this is a feature that's becoming more popular with the iconification of pages. An interesting example would be the the icons on this post (Flag and Bookmark). Neither has an accompanying title attribute:

<a class="button blue flag no-margin margin-right" href="#"><i class="fa fa-flag"></i></a>

This uses an icon font, but for the sakes of SEO / accessibility it probably equates to the same thing - no SEO, not accessible.