Replace logo with text

I want to write small tutorial for CSS and Xhtml.

Let’s start with logo or image replacement of the text. This method is very useful for your website SEO and your users will not notice any changes. Search engines will read your logo as Real text, not as Image.

I usually add logo real text to H1 tag and named it as id=”logo” like this:

1

<h1 id="logo"><a href="index.html">Your website name</a></h1>

Now add CSS styles to this tag:

1
2
3
4
5
6
7
8
9
10
11
12

#logo {
	padding:0;
	margin:0;
}
#logo a{
	width:100px;
	height:50px;
	display:block;
	text-indent:-9999px;
	outline:none;
	background:url(logo.png) no-repeat;
}

I use outline:none; style to fix small Firefox issue which appears when you click to link up with image or background. Also text-indent is needed for removing text from user viewing. You can manage padding and margin styles as you need.

If you need to fix PNG transparent effect for Internet Explorer 6, please, read this post.

You could download an example here.