Easy CSS Top Corner Banner

 

There are may ways to add a top corner banner image to your website. But I found the code at exploding-boy to be the easiest and most simple.

It is plain CSS code, no JavaScript. The code will create a linkable top corner (left or right) banner.

Before we begin, you need to prepare a 125×125 image as the top corner banner image. In the example, the image file is “TRbanner.gif”. If you are using different size image, please remember to change the “height” and “width” in the CSS code accordingly.

The CSS codes

Top Right Banner

#topright {
position: absolute;
right: 0;
top: 0;
display: block;
height: 125px;
width: 125px;
background: url(TRbanner.gif) no-repeat;
text-indent: -999em;
text-decoration: none;}

Top Left Banner

#topleft {
position: absolute;
left: 0;
top: 0;
display: block;
height: 125px;
width: 125px;
background: url(TLbanner.gif) no-repeat;
text-indent: -999em;
text-decoration: none;}

Tip: You should replace “TLbanner.gif” with the path of your top corner image file.

The HTML codes

To add a top corner banner, we need to add single line of HTML code to your web page. Open and edit your web page file (e.g. index.html), find <body>. After the line, add one of the following HTML code:

If it is a Top Right Banner…

<a id="topright" href="#" title="TopRight">Top Right Link Text</a>

If it is a Top Left Banner…

<a id="topleft" href="#" title="TopLeft">Top Left Link Text</a>

Tip: Replace “#” with the URL you want to use.

That’s it. You will have a top corner banner on your web page now. You can see the example at Easy Top Corner Banners

 

Connect with LiewCF

Enter your email address to receive free updates. Find LiewCF on Twitter, Facebook, and Google+

6 Responses to Easy CSS Top Corner Banner

  1. jen September 29, 2006 at 2:09 am #

    the css id should be “topleft” for Top Left Banner html code. I think you forget to change. :P

  2. LcF September 29, 2006 at 11:03 am #

    Thank you, jen.

  3. Ajay D'Souza September 29, 2006 at 3:24 pm #

    Hey thanks. I always kept wondering how to do this!

  4. noris December 31, 2007 at 3:09 am #

    it seems to me that these code only workd on IE not FF. any thought?

Add a comment