I am using a fixed width container div, in which my header div resides. I am using a background image to fill the header div and the image itself displays the web site title.

I am wanting to include a <h1> text-title with the padding set to -2000px so that the search engines can see the site title without the <h1> text sitting in view on the site.

The problem I am experiencing is that the title text is appearing inside the header div on top of the background image. Am sure this is due to the fixed width container that I mentioned already. Does anybody know a technique to try that would solve this issue other then eliminating the background image?

If not I will just remove the text from the image now that I think about it.

There are several image-replacement techniques you can use. There are many listed here: http://css-discuss.incutio.com/?page=ImageReplacement

I think it might be best to remove the text from the image and just let the <h1> site on top of the image where you want. It probably won't be an issue, but it's possible search engines will see the <h1> as an attempt to hide text just for them.

Yea! I went ahead and removed the text from the image and put in a h1 tag using CSS to position it. Was a simple solution without any headaches. lol

Thanks all!

Umm... I develop for text based browsers too, yet it's quite absurd to hear what you'd do in visual browsers.

What you want to do for visual browsers is:

<div>
  <h1 style="display: none;">Your title</h1>
  <img src="your_image.png" alt="Your image" />
</div>

Search engines will still be able to read the site title, and visual browsers will not display it. Text browsers will display the site title, the img will not be displayed but the alternative text will be.

Is that what you're wanting, rather than trying to position an element off-screen?

Cheers,

MC