Clickable Background Graphic?

[keichan]

The Scoop:
I am trying to create a blog template that has entries that repeat. No biggie.

The Problem:
I want to have the background image linked to the blog's homepage and don't know how to accomplish this.

The Specs:
The background image is 100px by 100px. It is non-repeating and only appears in the upper right corner of every blog entry.

The CSS:
.entry {
background-color: #FFFFFF;
margin-top: 5px;
margin-bottom: 5px;
border: #000000 1px solid;
width: 498px;
background-image: url(http://www.X.com/bkg.gif);
background-repeat: no-repeat;
background-position: right top;
}

The Plea:
I would appreciate it if someone could tell me if/how to make the background image link back to the homepage, I would greatly appreciate it. Thanks in advance!

[toicontien]

As a background image you can't make it link to anything.

You could set the properties for the <a> tag to be a block element, give it a width and height (or just some padding) and place a background image in there.

In CSS:

.bgLink {
display: block;
background: url(url/to/image.gif);
width: 100px;
height: 100px;
float: left; /* This will cause elements to wrap around the right side of the link. */
}


In HTML:

<a href="" class="bgLink">&amp;nbsp;</a>


That's my suggestion for right now. Can you post any of the code you have so far?

[toicontien]

OK. I lied. There is a way:
In CSS:

#logo a {
display: block;
/* Width of logo graphic */
/* Height of logo graphic */
overflow: hidden;
background: transparent url("../images/logo.gif") no-repeat scroll top left;
/* The margin property sets the element
to be centered within its parent element.
You may exclude this if you want the logo left aligned */
margin: 0px auto 0px auto;
text-decoration: none;
}

#logoImg { display: none; }

In HTML:

<img src="" ... id="logoImg">
<div id="logo">
<a href="">&amp;nbsp;</a>
</div>

The reason you need the logo placed on the page twice (once in the <img> tag and another time as a background for the <a href=""> tag inside <div id="logo">) is non-CSS browsers will show the logo loaded from the <img> tag, and nothing from the <div id="logo"> tag.

The advantage here is that you can change the logo on every page of your site dynamically without needing to touch the markup on the pages. You can also specify different logos for different browsing media, such as handheld devices, print, screen, etc.

This makes it extremely easy to create special logos for the holidays, then change the file name for the background image to place that logo on every page of your site.

One more consideration: If a user has images turned off, use the title attribute for the <a> tag.

<div id="logo">
<a href="" title="The alt text you normaly put in for the logo">&amp;nbsp;</a>
</div>