CSS3 Image Replacement Tutorial
This was another fun little exercise. We use the :before pseudo class to add the image » We AP it in order to place it over the in flow text » We overflow hidden it to prevent the text from flowing out of the image upon text resize » And we make the height/width the same height/width as the image. Works flawlessly in all modern browsers IE8+.
The CSS
h1 {
width:500px;
height:100px;
overflow:hidden;
}
h1:before {
content:url(image.jpg);
position:absolute;
}
The HTML
<h1>Replaced Text</h1>
