Basically I want an image to be in a fixed position at all times, so even if I scroll down, the browser will still display the image in the same place; so the image will not scroll with the page at all, and it's always visible. I also want it to be on top of every other element, and semi-transparent.
This is what I've tried
Code: Select all
.topleftimg {
position: fixed;
display: block;
margin: 0px;
padding: 0px;
filter: alpha(opacity=25);
-moz-opacity: .25;
opacity: .25;
background-image: url('whatever.gif');
background-repeat: no-repeat;
top: 0px;
left: 0px;
z-index: 20;
}I implemented the above using <div class="topleftimg"></div> just before the </body> tag, and it didn't show anything.
This must be easy enough to achieve (if it is possible) but I'm finding it hard to find stuff on the web because when I search for css fixed image or css static image or css image overlay I get obvious non-related results.
Any/all help appreciated.