getting image to stay at bottom of page instead of screen 1

[TheCandyman]

I'm working on a page that has a large person image that i want to be fixed at the bottom of the page, not screen. It current stays in back of page text (which is good) but i can't force it to stay down. It instead stays at the bottom of the screen and in the middle of long pages. What should i change?

Example:

http://www.watchyourmouthaz.org

I tried changing the position to relative but the whole image shows below the page; top of image starts where bottom of page ends. What i'm shooting for is the bottom of that person image is aligned with the bottom of the while text area. Thoughts?

some css:

#body {
	font-size: .75em;
	margin: 0px;
	text-align: center;
	background: #01B6C9;
	color: #bfbfbf;
	height: 100%;
	min-height:100%;
	overflow-x: hidden;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#page{
	position: relative;
	margin-left: 50px;
	width: 580px;
	text-align: left;
	font-size: 14px;
	color: #333;
	padding: 30px 0;
	z-index: 1;
}
#watch{
	position: fixed;
	bottom:0;
	width: 1419px;
	height: 656px;
	background: url(../img/watch_m.png) bottom left no-repeat;
}

 

[ChrisHirst]

get rid of position: fixed as that sets the image in an absolute position relative to the browser viewport.


just use background-position: right bottom;



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

 

[TheCandyman]

I made the change you suggested but it's not working right.

http://www.watchyourmouthaz.org

So, I moved it so it was within the Div 'page'

http://www.watchyourmouthaz.org/index2.asp

And also tried it with it in the Div 'wrap'

http://www.watchyourmouthaz.org/index3.asp

Any suggestions????

 

[Vragabond]

In your 3rd example, give the div watch position absolute. That will work.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[TheCandyman]

That was it! Thanks!!!