Using CSS to position an image relative to the bottom of the browser window

Factual Questions
1

I know how to position an image relative to the top left corner of the browser window, but what I want is to have a certain image positioned like this: the image is 25 pixels from the left edge of the browser window, and 25 pixels above the bottom edge of the browser window. This should be the same relative to the bottom left corner no matter what size the browser window is. Even better if I can get the image to stay in that positioning as you scroll down the page (essentially the image is a watermark on the window, not a fixed element of the content).

But I dunno how to do this and my Googling hasn’t proved effective :frowning:

2

I would use css positioning for background images instead of trying to put your image as an object on the page.

Use:
body {
background-position: bottom left;
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url(‘yourimage.gif’);
}

Make your image with a 25px white space on the left and 25px white space on the bottom.

3

That won’t work, as I have a background image already that is essential to the way the page looks. (It’s a left-colum border about an inch and a half wide, the watermark needs to sit on top of it. And it’s a small graphic that tiles, not a big one, so I can’t just put the watermark as part of the background.

Actually the page uses tables and a number of different backgrounds to get the proper effect. The watermark needs to be above all the backgrounds.

4

Absolute positioning can be used:




#watermark {
	position: absolute;
	left: 25px;
	bottom: 25px;
}

...

<img id="watermark" ... />

Use the z-index property to make it appear in front of or behind the other content. You might want to look at adjusting the opacity of the object to get the traditional watermark look.

5

Yay! That worked! The lame part is that I sort of tried that syntax before, but in the img tag itself… and it dinna work. But now it does! :smiley: YAY!

6

(oh, and it already has the watermark look… I took the opacity down against the color of the area it’s going over when I made the image in Photoshop)

But anyway, 10-Q 10-Q 10-Q!