Here’s a simple tip to use CSS for displaying your website’s logo (and any image in general). The HTML is about as basic as you can get:
<h1><a href=”/”>My Great Website</a<>/h1>
The CSS to “hide” the text and display the logo image instead is pretty simple as well:
h1 {
width: 400px;
height: 100px;
background: url(/images/logo.gif) top left no-repeat;
}
width: 400px;
height: 100px;
background: url(/images/logo.gif) top left no-repeat;
}
h1 a {
text-indent: -300em;
overflow: hidden;
float: left;
width: 400px;
height: 100px;
}
This styles the text and sets the height and width of the h1 tag to the size of the logo, and displays the logo as a background image. The h1 a style hides the text from the user (but not from search engines) by negative indenting the text and basically hiding it off-screen.
The result:
- very simple HTML code that’s easily read by search engines (better for SEO)
- text that provides a correct representation of the logo (no ALT tag needed)
- design elements are kept separate from the code, making future updates easier (the image can be changed simply by modifying the CSS)