Picnic Website Code Tutorials

CSS3 Image Replacement Tutorial

12/13/2012

View Demo

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>
		

Sponsors

Top Donators

Friends of Mine