Monday , 27 March 2017
Home » Technology » Development » Discovered (??) CSS Hack – Loading Logos First

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.

About Justin Lee

Check Also

Apple WWDC 2014 Videos Podcast RSS Feed Generator using XSLT

I realised there isn’t any podcast subscription link for the Apple WWDC 2014 videos at …

One comment

  1. A better way is to use transparent image for #logo a, and specify the width and height.
    If you use both image, sometimes will have rendering problems

Leave a Reply