1

I have a large div with the site header/logo as the background image. Is there anything wrong with putting a h2 tag containing the site title behind this using z-index, so that it would show if the user couldn't/didn't get the image for some reason? I know this is different to a standard [background on the h2 element] image replacement. (EDIT: Sorry maybe i'm not making it clear - i'm using a div background image not an IMG tag)

Thomas Mueller
  • 48,905
  • 14
  • 116
  • 132
byronyasgur
  • 4,627
  • 13
  • 52
  • 96

5 Answers5

3

You should use the alt attribute of the img tag, so if the image isn't loaded for some reason, the text would appear.

This is exactly why the alt attr exists,.

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • ah well then just have some text inside the did, make it part of your header design, it's bad seo practice to hide elements like this. – Kyle Sep 22 '11 at 19:56
  • that's what I was thinking - do they just make a sort of exception for regular image replacement ? – byronyasgur Sep 22 '11 at 20:00
  • Regular img replacement I accepted as it's needed in case your img breaks. You could always just use an h1 tag with the background img and in this case you'd solve all issues if the Img breajs :-) – Kyle Sep 22 '11 at 20:30
2

You can simple place img tag with alt attribute. That way if image is not loaded, text will be displayed. 

<img src="" alt="This text will be displayed" />
simoncereska
  • 3,035
  • 17
  • 24
2

If possible, I would ditch the div and just use an h2 with an id and set a background image to that.

I do that whenever possible to avoid excessive divs when I could use other block-level elements, if it only has a background and text. An h* with a background image is still a heading.

Chris C
  • 2,003
  • 15
  • 18
  • but the logo/header div which i'd be replacing is 960px wide - ( i wanted to have a title and description available - ( i know i didnt say that ... sorry )) ... anyway would you still say i'd be better off having a h2 that size – byronyasgur Sep 22 '11 at 19:57
  • am trying this out but the problem i'm coming up to is that there's no way to position the title for "no image" scenarios – byronyasgur Sep 22 '11 at 20:23
  • ahh - possible to set using text-indent and line-height – byronyasgur Sep 22 '11 at 20:42
  • actually - line-height works but text-indent also affects the image - though someone could probably get around this i'm not bothered. Thanks for all the information everybody – byronyasgur Sep 22 '11 at 21:09
1

Google doesn't like what you describe:

http://www.google.com/support/webmasters/bin/answer.py?answer=66353

However, from a pure design perspective, there is no real problem, save some bloated code.

You might want to see how often your images fail before you attempt any changes.

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
0

That's fine. Note that many feel the site logo isn't really something you'd put into an h* tag other than on the home page, when it makes sense to put it in an h1 tag.

DA.
  • 39,848
  • 49
  • 150
  • 213