Replace your logo image with a hidden H1 tag
There are several ways to accomplish this, such as:
<h1><span>Company Name</span></h1>
h1 span {
display:block;
height:0;
overflow:hidden;
}
There is another way without using span tags
<h1>Company Name</h1>
h1 {
background-image: url(images/logo.gif);
width:300px;
height:129px;
font-size:1px;
text-indent: -999em;
}
The problem with the above is that if images are turned off and CSS is on, the image won’t load and the text will be hidden.
Another option is:
<h1><span></span>Company Name</h1>
h1 {
position:relative;
width: 300px;
height: 129px;
font-size: 50px;
}
h1 span {
position: absolute;
top: 0;
width: 300px;
height: 129px;
background-image: url(images/logo.gif);
}
This example lays the span element on top of the text in the h1 element, but the image background cannot be transparent or the text will show through. The text also needs to be equal to or less than the size of the image, otherwise it will spill over.
