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 icon on the right hand side, while the page scrolls. I have used it here for my Facebook link but you can as many images as you want, You could also use a transparent 32bit .png image.

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;


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 or similar tag that sets the width of your page layout.

place this code below your #wrapper tag, or similar, 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>

You should now be able to add the staitc images in the position of your choice. Pleas Note: that this method is different to using a Background Image.