How can I put an image in the header via CSS and make it a link? Is there a CSS property for this?  As an example, say in the below I wanted to make home.png a clickable link that points to http://www.domain.com.  How can I accomplish this?

#headerimg {
    position: relative;
    background: url(images/home.png) no-repeat left center;
    padding: 10px 0px 0px 0px;
    height: 60px;
    margin: 0px auto;
    padding-left: 60px;
    width: 780px;

This might help:

http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/

 Hi Try this:

 #headerimg {
    position: relative;
   /* background: url(images/home.png) no-repeat left center;*/
    padding: 10px 0px 0px 0px;
    height: 60px;
    margin: 0px auto;
    padding-left: 60px;
    width: 780px;
    display: block;
}

#headerimg a{
background: url(images/home.png) no-repeat left center;
display:block;
width: 780px;
height:60px;
text-indent: -9999em; /*this hides the text for you */
}

So the html looks something like this:

<div id="headerimg"><a href="#" title="title">this text is hidden</a></div>

 Sorry for the total noob questions, but I'm still having some problems with this and I can't figure it out.  Here's my complete html section, which seems to be causing some issues when I use your changed CSS.

<div id="headerimg">
<h1><a href="$urls.Home" title="$data.Site.Title">$data.Site.Title</a></h1>
<div class="description">$data.Site.TagLine</div>
</div>

When I use your CSS, I end up with 2 home.png images.  Seems like it's inserting an image on the h1 tag as well, where before, it was just text.

Thanks in advance for any help.

I ditched the graffiti macros, created one header.gif of what was previously displayed (e.g. Site Title, tagline) along with my 'logo' and used your CSS example.  Worked great.  Thanks for your help.

 Yup no problem, Sorry didn't reply to your previous post. I was going to suggest removing the macros and then try, even though they shouldn't intere unless you've used an image within them. Don't forget the css only hides the text within the A tag and not the H, and since you're not explicity applying to the css to H1 a { }, the image will show twice because its being applied to the ID you've created as well as the A tag.

 Hope that makes sense

Yes, does make sense.  Thanks for the feedback.

I have another dumb CSS problem I'm trying to tackle. I can't quite figure out alignment.  The most basic thing I'm trying to do right now is just get an RSS icon/link to display to the very right of my navi bar.  I want it right-aligned and also I don't want it to move when I resize the browser window.  Ugh...  :(

I also tried getting an image to display in my header, right-aligned on the same row/height as my website logo. I couldn't get that working either.

Any tips or online resources would be much appreciated.