Static image overlay

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Static image overlay

Post 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.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post by Christopher »

All you have in the div is a background image -- no content. Give it a width and height.
(#10850)
Post Reply