This post comes from an old backup. The information provided here might not be up to date and might not reflect my current points of view.

For put our website’s logo, people always have used a <img> tag and sometimes a <a><img> tag. This looks like this:

<a href="/">
<img src="/img/logo.png" />
</a>

But CSS gives us a more proffesional way to insert a logo. By this way, we won’t insert a “<img>” tag or a “<a><img>” tag. We only will insert a “<a>” tag, which contains image and link, using CSS. This may look like this:

<a href="/" id="logo"></a>

And everything is done! After giving our link an id, the CSS code is written.

#logo {
background: url('/img/logo.png'); /* Replace this with your image */
width: 300px; /* Replace this with image width */
height: 100px; /* Replace this with image height */
display: block;
}

Try yourself! Everything will be the same, but this code is more efficient.

↩ Back home