There are several ways to accomplish this, such as:
Company Name
h1 span {
display:block;
height:0;
overflow:hidden;
}
There is another way without using span tags
Company Name
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:
Company Name
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.