h1#logo {
width: 200px; // width of image
height: 100px; // height of image
background: url(../path/to/image.jpg);
text-indent: -9999px;
}
This technique is credited to Mike Rundle and referred to as the Phark Method. There are many more techniques for CSS Image Replacement.
I love this technique as it doesn’t require any spans and works perfectly. Also when you try to select the background image it doesn’t move in Firefox unless it’s a link which is nice.
I think CSS should include some sort of text replacement property though as this still seems more of a hack.
Hello,
I used this technique, but I noticed a small issue in Google Chrome: the text-indent made the element grow in width by 9999px. So I had to add “overflow: hidden” to the CSS.
I love this text replacement, but I always like to used em’s instead of pixels just to make sure this text is nowhere near the window, and I agree with @mickey about overflow: hidden
Why not just use simple HTML4?
<img src="../path/to/image.jpg" width="200" height="100" alt="Image replacement">
No more tricky hacks. HTML4 is awesome.
One example: You can change the wordpress blog title text (it´s normally a h1 tag) with your custom logo image without coding in php. In other way you can hide your logo for screenreaders.
I love this technique however when somebody views my site http://www.commercial-london-epc.co.uk/ on a smart phone the text overlays the background image. I was wondering has anyone else found a fix for this yet? Another drawback I’ve noticed is that a lot of people try to click the header intuitively to navigate back to the home page.
I am slightly baffled…
I have been looking around, how to do image replacement these days and found some good articles here on css-tricks, discussing the Ins and Outs of various technics.
Since all of them basically try playing around with where the text is placed on the page, trying to hide it, I kind of didn’t feel to comfortable with any of them.
The one technik I came up with myself now, however I haven’t found here anywhere, which I didn’t expect, since it is quite simple.
Can someone try to clarify, why it could be a bad idea, to use rgba and simply set the text to transparent like this?
Html:
Css
Thx,
Josh
I’m using the same way in my project and I didn’t get any issues.