• Skip To Content
• News
• Site Map

CSS Logo Replacement

Saturday, December 17, 2005 by Nicholas Gagne

I have seen many web designers struggle to create a logo image that both looks great on screen, within a stylized page layout, and in print. This method of using one image to accommodate both media types will result in a compromised design. The "CSS Logo Replacement" method will explain how to deliver different logos to print and screen.

Getting Started

I have set up a very basic page layout sample with a logo on top for us to work from. Notice that if you were to try and print this page, the logo would look completely out of place.

First we want to replace the logo image with a div (id="logo") and place the print logo image in that div (with an appropriate alt attribute, of course):

<div id="logo">
    <img src="/images/logo.gif" alt="iBloom Studios" />
</div>

Then, in our srceen media stylesheet (I will be using embedded styles to keep things simple) we will set the height and width of the logo div to the screen logo image's height and width:

#logo
    width: 582px;
    height: 130px
}

Next, set the background of the logo div to the screen logo image and hide the print logo image. This will allow the screen logo to be displayed only on screen and the print logo to be displayed only on print:

#logo{
    width: 582px;
    height: 130px;
    background: url(/images/article2logo.jpg)
}
#logo img{
    display: none
}

Optional: Clickable Logo

Finally, if you would like your logo to be clickable and link to your homepage, you can simply change the logo div into an anchor tag and add a href attribute:

<a href="/" id="logo">
    <img src="/images/logo.gif" alt="iBloom Studios" />
</a>

You will also need to add display:block to #logo and remove any borders in your print stylesheet:

#logo{
    width: 582px;
    height: 130px;
    background: url(/images/article2logo.jpg);
    display: block
}
img{
    border: none
}

You can view the finished layout example to see this "CSS Logo Replacement" method in action. This should be a good starting point for anyone looking into CSS print layouts.

• Digg this article
• Add to Del.icio.us
• Read more articles
• Subscribe to RSS Articles Feed