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 P
    Aug 6, 2012 at 15:55
  • Can you explain why you're displaying your images this way?
    – Su'
    Aug 6, 2012 at 20:52
  • @Su Probably to avoid too many HTTP requests. Aug 7, 2012 at 12:06
  • 1
    @DisgruntledGoat using images this way still make http request. unless using Sprites..
    – YardenST
    Aug 7, 2012 at 12:54
  • 1
    @YardenST I meant using sprites, but you're correct - the code fishman provided looks like it's just one image rather than sprites. Aug 7, 2012 at 13:27

6 Answers 6

  1. Use image site maps

  2. 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.


Google's John Mueller said this morning in google webmaster mark that Google Image search does not index and rank images from CSS background code. He said if you want your images to rank in Google Image search then you best use normal image tag with the source attribute pointing at the image.

Check google webmasters for more details.


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.

  • This doesn't really work. The text you're talking about is going to get indexed as page text, not associated with the image being represented. It'll also probably make the document look like gibberish.
    – Su'
    Aug 6, 2012 at 20:57
  • It doesn't have to be a div, but text around an image helps. Google is great to understand context, and the page text will help image indexing.
    – milo5b
    Aug 6, 2012 at 21:08
  • @milo5b I'm not buying that Google is going to take text in a div and associate it with an image that's being used as a background on it, particularly given that CSS-applied imagery is pretty much by definition and intent non-content(usually). Provide backing information, please.
    – Su'
    Aug 7, 2012 at 16:18
  • @Su' I am not saying that it would help CSS-applied imagery, but any image search in Google (especially high volume keywords, for example you can try "Bugatti Veyron") will back up the theory that page text is also used for image indexing (the image will probably have to be in the classic <img> tag, I never came across an image that has been indexed in Google Image search that wasnt <img>). Also, any text would help - div or not (page title, headers, paragraphs). Of course we can't be 100% certain until we'll read Google Search Algorithm's source code.
    – milo5b
    Aug 7, 2012 at 19:36
  • @milo5b "not saying that it would help CSS-applied imagery" Then it doesn't address the actual question at hand, which is why I asked for clarification. (And also why I asked for clarification from the asker, because it might lead to alternative options like mine, assuming no conflicting requirements.)
    – Su'
    Aug 7, 2012 at 20:57

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.


According to Moz, your best best is to optimize the image filename, as you can't pass alt tag values to background images. If you want your page to be about catalytic converters, then upload images of catalytic converters with filenames that include "catalytic-converter". Make sure to use dashes to separate words, as Google interprets underscores as word joiners, as opposed to separators. For example if your filename was "family_at_park.jpg", Google would interpret that as "familyatpark", not 3 separate words.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.