My Website

home : : demos : : exercises : : videos

Using an image to replace the headline.

Code for CSS to replace the h1 tag with an image:

/* replace h1 tag with an image */

h1 { text-indent: -9999px;
font-size: 1px;
margin-bottom: 0px;
}

#headerbkg {
background-image: url(images/picturename.jpg);
background-repeat: no-repeat;
background-position: center;
width: 800px;
height: 101px;
}

The h1 selector has a negative margin - so the "real" text shoots off the edge of the page. But the tag is there for search engines to see. You can make the h1 font any size. I made it 1 pixel.

Next I created an id which I named headerbkg. Use the same background image placement as you have used previously. I called out the size (width and height) of my graphic. Change this to fit the image you create.


In the html document write the code this way to make it work:

Be sure to link your css in the head of your document

<html>
<head>
<title> Headline Replacement</title>
<link rel="stylesheet" type="text/css" href="yourstylesheet.css" />

</head>

<body>
<div id="container">
<h1 id="headerbkg">My Website</h1>

<p>Using an image to replace the headline.</p>
</div>
</body>

</html>

Pretty simple code - but it looks great. Just give the h1 tag the id you created in your css and of course use the name you give your style sheet when you link it.

You could also use this to add images for individual page headers or identifiers. Just give them a new id spcific to the individual page.