Discovered (??) CSS Hack - Loading Logos First

I've always had problems putting links on css backgrounds. For example, a simple logo like this.

<div id="logo">
<a title="SgDotNet For Cool Developers" href="/">
<span class="alt">SgDotNet For Cool Developers</span>
</a>
<div>

with the CSS...

#logo a { background: transparent url(../Images/logo/sgdn.jpg) no-repeat left top; }

The logo will render the background image LAST! Now, as a main website logo, we don't want that do we? We want it to be rendered first. So here's what I changed.

#logo { background: transparent url(../Images/logo/sgdn.jpg) no-repeat left top; }

This will render the background image FIRST, but the anchor is gone. This isn't what I need.

So this is what I did... I added both CSS in. And it renders FIRST, plus the anchor is still there.

#logo { background: transparent url(../Images/logo/sgdn.jpg) no-repeat left top; }
#logo a { background: transparent url(../Images/logo/sgdn.jpg) no-repeat left top; }

And this is all I did. It worked perfectly fine. If there's such a hack already discovered out there, please forgive me for my ignorance.

Hee, feeling proud I discovered this myself.