Pro HTML5 and CSS3 Design Patterns

CHAPTER 10 ■ STYLING TEXT

Text Replacement with Image

Example shown with text replaced by an image

Example shown when browser could not display the image

HTML

<h1>Text Replacement with Image</h1>

<h2 id="h2">Heading 2<span></span></h2>

CSS

#h2 { position:relative; width:250px; height:76px; padding:0; overflow:hidden; }

#h2 span { position:absolute; width:250px; height:76px; left:0; top:0; margin:0;

background-image:url("heading2.jpg"); background-repeat:no-repeat; }