Proper CSS Positioning Help Needed

Basically what I am trying to do is have my background image fill the page and have my nav, on top of my footer, and have both remain at the bottom. I've tried a lot of different t

Solution 1:

You could add the below CSS, which covers the whole browser background with the image.

body { 
 background: url(images/cool.png) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

Solution 2:

Is this what you are looking for?

http://jsfiddle.net/6uAdA/11/

In order to make the image cover the background of the body element you need to make its background-size: 100% 100% and background-repeat: no-repeat (if the background is set to repeat, the browser repeats the image instead of stretching it).

To inform the body background what size is exactly 100%, you need to give the body and its parent element html a defined size. Which, in this case, will be width: 100%; and height: 100%;. This ensures that the browser knows which size the image is relative to.

---

CSS

html, body {
    width: 100%;
    height: 100%;
}
body{
    background-image: url("http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}