Kieran Chapman Design » CSS http://kieranchapmandesign.com Web and user experience design by Kieran Chapman Fri, 21 Oct 2011 02:44:14 +0000 en hourly 1 Display Your Logo with CSS http://kieranchapmandesign.com/2009/10/display-your-logo-with-css/ http://kieranchapmandesign.com/2009/10/display-your-logo-with-css/#comments Sat, 17 Oct 2009 14:42:53 +0000 admin http://kieranchapmandesign.com/?p=261 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)
]]> http://kieranchapmandesign.com/2009/10/display-your-logo-with-css/feed/ 0