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

css, design, layout, reference, tips, web, webdesign

Share this:
  • jen

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

  • LcF

    Thank you, jen.

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

  • noris

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