CSS/HTML - proper way to combine text and image in a page header

Question

I'm looking for the optimal way to have a page header that displays an image but with text visible for search engines and in case the header image doesn't load.

The best advice google has on this is to have a <div> for the header with an <h1> for the text. In CSS, hide the <h1> with display:none; and add the image as the background image of the <div>. This might works for search engines but if the image doesn't load (or takes time to load), the user doesn't see anything at the top of the page.

So what I'm really looking for is a way to have a visible <h1> text and when the image loads, it covers the text and displayed in front of it.

Another round about way to do this is to use javascript and hide the text when the image is done loading. This is a rather awkward solution and is far from perfect.

What is the best way to do this?

Answer 1

I wouldn't care that much about the image not loading problem (I might be utopist here). The most important part is that text is present in your markup both for search engines and screen readers.

I would keep the markup minimal (always a good idea)

<h1>Title of your page</h1>

In the CSS

h1 {
    text-indent: -10000px; /* Will hide text from users, while still showing for search engines/screen readers */
    background: url('../images/logo.png') no-repeat left top;
    width: 200px; /* your image dimensions */
    height: 50px;
}

Answer 2

I tend to approach this problem using a slightly less-pure method.

I nest the image within the h1, to give the following mark-up:

<div id="header">
        <h1>This is the header<img src="img/stackoverflowLogo.png" /></h1>
</div>

And then use CSS to position the <h1> relative, and the image with position:absolute. This causes the image to taken out of the document flow and moved 'above' its parent element's text. The CSS I use is (similar to):

#header h1
    {position: relative;
    border: 0 none transparent;
    font-size: 2em;
    margin: 1em auto;
    border: 1px solid #ccc;
    }
#header img
    {position: absolute;
    top: 0;
    left: 0;
    }

I've posted a demo here: http://www.davidrhysthomas.co.uk/so/h1Img.html.

The first section shows the first step, positioning the image in relation to its parent, the image with a transparent background to give an idea about what's happening.

In the second and third sections I've used jQuery to assign to the <h1> dimensions equal to that of the image, in order to prevent (as in the first version) the <h1> text extending beyond the image itself, as follows:

$(window).load(
    function() {
        var w = $('#logo').outerWidth();
        var h = $('#logo').outerHeight() ;

        $('#two h1').css('width',w,'height',h);
        $('#three h1').css('width',w,'height',h);
    }
);

It is a little bit kludgy, it obviously relies upon javascript being enabled and also there's a bit of a page flicker on page-load as the document runs the script and applies the math/css.

The approach does meet your requirements of having text visible until the image itself loads, and it does use xhtml and CSS to hide the text. And if the image-dimensions are known beforehand it doesn't require the jQuery/js to prevent the overflow.

(My apologies to Jeff, Joel et al, for using the SO logo without any kind of permission, but it felt appropriate at the time... =) )

Answer 3

Another option is to use the z-index CSS property to have the image load overtop of the text--the text is still visible, but hidden behind the image (think of "send-to-back"). It's probably one of the lowest-tech solutions :)