If I understand correctly you’re not talking about the header image but the title and description text, which you want to replace with a graphic text.
There are several ways of going about this. I’ll share 2.
A very common technique is image replacement. In short, you put the header in a div and give it the dimensions of your image. You then set the image as the background of the div and give the h1 heading in the div a negative text indent of -9999px
In your case the CSS would look something like this:
div#logo { background: url(path/image.jpg) no-repeat;
width: 800px;
height: 100px;}
#logo h1 { text-indent: -9999px; }
The only drawback to this technique is that when the images are not loaded or are disabled in the browser the CSS will still send the h1 off the left side of your screen and the visitor won’t be able to read it.
Since you’re replacing the text with a graphic text anyway, why not replace the actual text with a graphic in your (X)HTML. Just place the image file within the h1 header element and ad the text in the alt attribute. This way, should the image fail to load or be disabled, the image will be replaced by the alt text and, being within h1 tags, the text will be rendered as an h1 heading. Well… unless you view it in Internet Explorer.
A combination of these two is also possible. You can put a printer friendly graphic within the h1 element and replace it with a nicer looking graphic for on screen using the CSS. The alt attribute still comes to the rescue when images fail or are disabled
All this info can be found in more detail on “A List Apart” (not my site)
I am working on a site where I show tricks like these and promote web standards. My site is VanBerghem.com
Hope this helps
