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