CSS fixed image or watermark

Here are simple instructions for adding a static image or watermark in a fixed position on your web page. The image remains in the same position, notice the 3 icons on the right hand side, while the page scrolls. I have used it here for my Facebook, Twitter and YouTube links.

Here is the first bit of code, this must be placed above the </head> tag.

 

<style type="text/css">
.staticlogo {
float: right;
position: fixed;
top: 30px;
margin-left: 870px;
}
</style>

 

Change the top and left-margin values to suit your page layout.

 

Placing the images on the page

This is assuming you are using a css layout with a fixed width using the #wrapper

place this code below your #wrapper tag on your page.

 

<div class="staticlogo">
<p><a href="http://www.facebook.com/user" title="Freebits FaceBook" target="blank"><img src="link to your image.png" width="32" height="32" alt="Facebook" title="Facebook" border="0" /></a></p>
</div>

 

You should now be able to add the staic images in the position of your choice.

.