homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Making my logo into a link
... in a CSS file
troels nybo nielsen

 8:29 pm on Apr 8, 2004 (gmt 0)

On most of my websites I have a logo placed in the upper left corner. I do it in CSS something like this:

.top{ margin-top : 0em;
width : 100%;
text-align : center;
background-image : url(grafik/logo.gif);
background-repeat : no-repeat;

I would like to make the logo into a link. What is the best way of doing this?

(Not sure about the correct forum for this question)



 8:56 pm on Apr 8, 2004 (gmt 0)

You can't do that without putting the logo into your HTML and surrounding it with <a href=...>...</a> (in the usual manner.

You could, however, define a link in your HTML and assign the logo as a background image. Ask about this in the CSS forum.

troels nybo nielsen

 9:56 pm on Apr 8, 2004 (gmt 0)

> putting the logo into your HTML and surrounding it with <a href=...>...</a>

That was exactly what I was hoping to avoid. Could I use SSI? (I've never tried that.)


 10:06 pm on Apr 8, 2004 (gmt 0)

SSI would work great, provided you server supports it. I have had that problem before. I don't think you can create a link (or any dynamic content) using CSS just yet. It is defined in the CSS2 specs, but is not well supported yet.


troels nybo nielsen

 10:46 pm on Apr 8, 2004 (gmt 0)

A belated welcome to WebmasterWorld, vwds. And thanks. It is always a special pleasure for a relatively veteran member to receive good help from a new member. I'm sure that Brett likes to see that too.

In my html file I now have

<div class="top"><h1>Title of page</h1></div>

I imagine to change this to something like

<div class="top"><!--#include virtual="http://example.com/logo.incl"--><h1>Title of page</h1></div>

where logo.incl would be a file with this content

<a href="http://example.com/">http://example.com/grafik/logo.gif</a>

Does that look alright?


 2:54 am on Apr 9, 2004 (gmt 0)

It is not necessary to use ssi to do this. If your site makes use of a single pixel transparent gif it can easily be employed to do the job. Place the img within the link tag, like so:

<a href="http://demo.xaraya.com/" rel="" title="Your Site Name">
<!-- in this theme we just use a transparent gif to overlay the logo -->
<img src="themes/Xaraya_Classic/images/transparent_pix.gif" alt="Your Site Name" />

Then style it something like this:

div#classicheader img {
width: 245px;
height: 70px;
float: left;

Here is the site that the above code came from:



 2:57 am on Apr 9, 2004 (gmt 0)

You could put a transparent gif instead of the logo, width and height of which are defined in CSS. That way you have all the benefits of making site-wide changes with CSS.

[edit]tolachi beat me to it :)[/edit]

troels nybo nielsen

 8:26 am on Apr 9, 2004 (gmt 0)

Thank you indeed. Making websites is almost like real life: Somewhere there is always a simple and elegant solution to problems that people like me fumble with.


 8:45 am on Apr 9, 2004 (gmt 0)

Another approach that avoids the need for the overhead of a transparent gif..

#logo {
display: block;
width: 200px;
height: 100px;
background: url(graphic.gif) no-repeat;

<a id="logo" href="http://example.com/"></a>

Plus you can take this one step further to provide heading text to search engines, screen readers and text browsers...

#logo {
display: block;
width: 200px;
height: 100px;
background: url(graphic.gif) no-repeat;
#logo h1 {
display: none;
<a id="logo" href="http://example.com/"><h1>example.com</h1></a>


 2:23 am on Apr 10, 2004 (gmt 0)

Wow. GrahamStewart. That is awesome, I'm going to use it.


 12:51 pm on Apr 10, 2004 (gmt 0)

<a id="logo" href="http://example.com/"><h1>example.com</h1></a>

Great apart from the fact that it won't validate - you can't wrap a block-level element (h1) in an inline element (a).

The transparent GIF is the way to go - you can place it in a div at the bottom of the page and use absolute positioning to place it over the logo.


 5:51 pm on Apr 10, 2004 (gmt 0)

Great apart from the fact that it won't validate..

Erm.. yeah, fair enough, good point. (It was off the top of my head)

Okay well this is equivalent and it will validate...

<h1><a id="logo" href="http://dalmuti.net/"><span>example.com</span></a></h1>

#logo {
background: url(graphic.gif) no-repeat;
#logo span {
display: none;


 11:01 am on Apr 11, 2004 (gmt 0)

wow i like that CSS idea also. I'v been trying to figure out how to save me time and space with pages by being able to put the logo with CSS
Thanks for the logo link tip via CSS


 12:39 pm on Apr 11, 2004 (gmt 0)

Whilst this method will work, there are some important issues to be aware of when considering accessibility of the result.

You might think, as grahamstewart said, that an anchor hidden by CSS would be visible in a screen reader. Not so, unfortunately. FIR, as it is commonly called, fails in certain screen readers (http://www.alist apart.com/articles/fir/), rather defeating the point of the technique.

That doesn't necessarily mean you shouldn't use FIR [digital-web.com], but you should be aware of alternative image replacement techniques [stopdesign.com], and other options:

All browsers understand alternative text. If your logo is an image, why not embed it as an image?

If you're using CSS styles, make sure your users can turn them off or change them. Some modern browsers (like Mozilla Firefox and Opera) can switch stylesheets on the fly from a selection provided by your website (I do this).

If you're allowing your users to "theme" your site (I do this too), you could use either XSL (client or server) or CSS (client; make persistent with a cookie) to serve up the content in a way that fits their needs. Suitable settings can be guessed by browser sniffing when they first visit, but make sure they can change them.

In short, don't blindly grab at the latest fashion. Consider your options carefully -- you might actually add a degree of "cool" to your site by making it that little bit more flexible.


 3:25 pm on Apr 11, 2004 (gmt 0)

While grahamstewart's technique is pretty similar to FIR, It's not quite the same thing. The point of FIR is usually to replace a header or some other text element with an image. Here, an html image is replaced with a css background image -- the h1 is just gravy for the robots and whether a screen reader catches it or not doesn't seem to matter very much.


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved