Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 1 down vote favorite

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.

share|improve this question
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
1  
@DisgruntledGoat using images this way still make http request. unless using Sprites.. – YardenST Aug 7 '12 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. – DisgruntledGoat Aug 7 '12 at 13:27

4 Answers

up vote 3 down vote accepted

  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.

share|improve this answer
up vote 2 down vote

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

share|improve this answer
up vote 0 down vote

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.

share|improve this answer
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 '12 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 '12 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 '12 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 '12 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 '12 at 20:57
show 1 more comment
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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