# How to optimize image in Google search if it is a background?

I have many images, and for a pretty view and better css control I mark them up as

<div style="background:url('image-url') no-repeat center center transparent;
overflow:hidden; display:inline-block; width:150px; height:150px;"></div>


But as we know HTML allows adding alt to image tags for search optimization. How can I include "alt text" in a background situation? I have submitted an image sitemap to Google, which includes all these image's URLs and page URLs.

-
Possible duplicate of stackoverflow.com/questions/4216035/… – Vince Pettit Aug 6 '12 at 15:55
Can you explain why you're displaying your images this way? – Su' Aug 6 '12 at 20:52
@Su Probably to avoid too many HTTP requests. – DisgruntledGoat Aug 7 '12 at 12:06
@DisgruntledGoat using images this way still make http request. unless using Sprites.. – YardenST Aug 7 '12 at 12:54
@YardenST I meant using sprites, but you're correct - the code fishman provided looks like it's just one image rather than sprites. – DisgruntledGoat Aug 7 '12 at 13:27

1. It is really not recommended to use images this way. It's like using <span> instead of <a>. It is possible to do everything you want with normal <img> tags.

My recommendation: use <img>. If you for some reason really cannot do it, make good image site maps and use really descriptive images names.

-

For that images use descriptive names: use descriptive-name.jpg instead of image-01.jpg. It will help and compensate the absence of alt.

-

I want to add to Roman answer that beside the imag name you can add text to the div or in any part near the imag to help the search engines understand it.

Div tags can get titles to-and help users and search engines to understand the div content.

-
There may be other considerations I'm not aware of, but if you're doing what I think with this method, you might consider using the CSS clip property to get the effect instead. It lets you create the same sort of "window" onto the image, but is done directly on the image itself rather than using a div to cut it off. The result is you'd be using plain img tags in your markup, and can just place alt text on them as usual.