Display Your Logo with CSS

Posted by on Oct 17, 2009 in CSS, Development | No Comments

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;
}

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)