My Beautiful Pink Shoe

Back to EXAMPLES Page

Image Replacement of H1 tag

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;

Next Step:

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 */

Last Step:

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.