Replacing H1 text with a logo image: best method for SEO and accessibility?

Question

It seems like there are a few different techniques out there, so I was hoping to get a \"definitive\" answer on this...

On a website, it\'s common practice to create

Answer 1

    
Insert Website Name
    
Insert Slogan Here

#header .logo h1 {
    background: red; /* replace with image of logo */
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a {
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a span {
    display:none;
}