Hide text in H1 tag but not the image

Question

I need to hide the text inside a H1 tag. But not the image. Problem is that i only can change the css and not the html

<h1>
<img src="img/headerimg.png" width="900" height="125"/>
Header 1 text
</h1>

Is there a way to only hide the "Header 1 text" with only css? I'm doing this for big client and they gave me only acces to the css file.

Answer 1

Give a 0px font size

​h1{ font-size:0px }​

Edit: Working sample

Answer 2

Set the image as background of the <h1>, add CSS properties to the <h1> to make it the size of the image and use a negative text-indent on the headline to remove the text. That would be the usual and ideal way to do it if you had access to the html too.

Since you only have access to the CSS, you can use this:

h1 {
    font-size: 0.1px; /* 0 gets disregarded by Internet Explorer, 0.1 gets interpreted right by every browser */
}

Fiddle: http://jsfiddle.net/VGgnD/