Hi Guys

 

I'm new to web design and would appreciate your help.

I have a image that i wish to use in the background, it's a illustration of blades of grass and bees flying above it.

I want this image to stay at the bottom of the page at all times and be a set distance away from the page body. so when you scroll down this image scrolls down as well and page body doesn't scroll into this picture.

Also want to know how i can get this image to resize width ways so its stays in proportion on different monitors.

 

Thanks for your help in advance

I want this image to stay at the bottom of the page at all times and be a set distance away from the page body. so when you scroll down this image scrolls down as well and page body doesn't scroll into this picture.

That sounds as if you need a "sticky footer" This type

http://ryanfait.com/sticky-footer/

or

http://www.cssstickyfooter.com/

sticks to the bottom of the window if there isn't much content above, but if there is a lot of content above that fills the window height, the footer will stay below the content and you scroll to see it.

 

Also want to know how i can get this image to resize width ways so its stays in proportion on different monitors.

That sounds as if you need this tutorial:-

http://css-tricks.com/perfect-full-page-background-image/

which you could adapt for the footer only.

 

but whether you can use both tutorials to do what you want, I don't know. A position: fixed method will conflict with the sticky footer code.

That hack seems a bit too much. I thought you would be able to do it using:

 

body{

padding-bottom: 100px;

}

 

#footer{

width: 900px;

height: 100px;

position: absolute;

bottom: 0;

}