Web Standards Group

Resources

Image replacement - cleaner and more accessible way

Posted: Monday 29 November, 2004
By: Pawel Knapik

It is easy:
h1
font-size: 1.2em;
height: 2em;
line-height: 2em;
overflow: hidden;

h1#replaced:before
content: url('replaced.gif');
display: block;


With defined header height, overflow:hidden and generated image defined to display as block-level element we've got what we want: when image is loaded text goes to next line, so is out of visible header area.

Would be great, but there is browser support problem. Go to the detailed description and read how I solved the problem.