Page 1 of 1

Static image overlay

Posted: Tue Feb 27, 2007 12:04 pm
by jayshields
First off, I don't even know if this is possible. I presume this layout uses a similar technique to what I'm looking for but I've experimented with some CSS which I found in the source there but nothing seems to be working.

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;
}
So this attempt would place the image in the top left corner, but I would like to be able to create other similar classes and position them in different places, likely also in the top right (would I just change left: 0px; to right: 0px; for that?).

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.

Posted: Thu Mar 01, 2007 2:34 pm
by Christopher
All you have in the div is a background image -- no content. Give it a width and height.