Styling header sections that are just a graphic

HTML & CSS
1

Hi, everyone. Sometimes the top of the webpage is just a graphic, so you can code it with just CSS, like this:


#header {
     height: 154px;
     background: #FDF7F1 url(images/banner.gif) no-repeat center;
}

But then the HTML looks weird because it’s empty:


<div id="header">
</div><!-- header -->

So I’ve taken to inserting a heading, like this


<div id="header">
     <h1>Name of Website</h1>
</div><!-- header -->

And then in CSS


#header h1 {
     display: none;
}

What is your opinion? Are there any drawbacks to this? Is there a better way of doing it?

2

I don’t think there is anything wrong with the way you had it originally with an empty div. For clarity you could put a html comment above the div stating its purpose and noting it has a background image assigned in the css. I don’t see the point of having a dummy <h1> in the div with display: none; unless of course you are trying to fool a search engine bot with a fake heading tag.

3

There are better ways, yes. The problem with the first version is that it’s basically meaningless. Whatever information is in the background image (e.g. title) is will not be seen by some visitors, and it won’t be seen by search engines either. The second method is a little better, in that you at least have some h1 text in there that search engines can see. But some people (such as those using screen readers) won’t see it (because of display: none), so they will get no title at all.

The best method is to use image replacement, whereby the H1 is in place but an image is placed over the top of it. See a simple example here:

http://www.pmob.co.uk/temp/headerreplacement2.htm

http://www.pmob.co.uk/temp/headerreplacement3.htm

4

Thanks so much, Ralph. I’ll check out that method. I didn’t realize that display:none meant readers also ignored it, so that’s no good. My intent was precisely to provide text for both accessibility and SEO (but not trying to fool any search engine, Max! :))

5

I still recommend the method I links to above, but for future reference, if you want to hide text like that but make it available to readers, giving it position: absolute and left: -9999px (or similar) seems to be a better method. Most readers (as I understand) ignore something with display: none, but not when it’s just moved off screen like that.