Why would you use an Image Replacement? Because the fonts on the web can be a bit dull. And a banner with an image could be more interesting.
Here's how to do it:
Use the h1 tag and give it these styles:
text-indent: -9999;
/* This makes whatever text you write go off the side of the page. You still have text for Search Engine Optimization, but you get a cool banner for your user to see */
I usually add something like this as well:
font-size: 1px; margin: 0px;
Style an id that includes the replacement image
I called mine #headerbkg (you can name it anything you want)
{ background-image: url(images/Shoebanner1.png)
/* I used a png because I made a transparent background on my image and it can show the background color through */
background-repeat: no-repeat;
background-position: top left;
width: 657px;
height: 133px ; }
/* the height and width are the size of the image */
In the body of the document add the h1 tag with the id, add some text and close the h1 tag.
<h1 id="headerbkg"> This is one of my beautiful pink shoes </h1>
And that's it.
View another Image Replacement Example • Go back to Example page.