Easy CSS Top Corner Banner

2 Flares Twitter 1 Facebook 1 Google+ 0 Pin It Share 0 2 Flares ×

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

2 Flares Twitter 1 Facebook 1 Google+ 0 Pin It Share 0 2 Flares ×

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?

Trackbacks/Pingbacks

  1. 我的家,我的wordpress at The Terminal - John’s Blog - May 21, 2007

    [...] .特別CSS/其他效果 –角banner 大家在每一頁Blog的右上角看到去隨寫類文章的banner,就是來自加入了這一個CSS效果而生的,相關連結: http://www.liewcf.com/blog/archives/2006/09/easy-css-top-corner-banner/ [...]

  2. Nine Over Ten 9/10 » The Thing About Corner Banners and How to Implement Them - May 26, 2008

    [...] Easy CSS Top Corner Banner (here): This tutorial shows how to place the corner banner using [...]

Add a comment

2 Flares Twitter 1 Facebook 1 Google+ 0 Pin It Share 0 2 Flares ×