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 things and I can seem to position them properly. I have a very basic proof of what I want my website to look like but i can't post pictures yet... Any help is much appreciated.

this is my current HTML:

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Nathan Langer</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="wrapper=">
<div id="name">
    <h1>Nathan Langer</h1>
</div>
<nav>
    <ul>
        <li><a href="resume.html">Resume<img src="images/resume         logo.png"width="35"height="35"><strong></strong></a></li>
        <li><a href="portfolio">Portfolio<img src="images/portfolio logo.png" width="45"height="35"><strong></strong></a></li>
        <li><a href="aboutme">What I Do<img src="images/camera logo.png" width="75"height="35"></a></li>
    </ul>
</nav>
    <h3>For professional video and media production</h3>
</div> <!-- close for wrapper  -->
</body>
</html>

And my CSS:

body {
background-image: url(images/cool.png);

vertical-align: middle;
background-size:100%;
background-position: fill;
background-repeat: no-repeat;
    }

#wrapper {
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    }
#name {
    text-align: center;
    font-size: 35px;
    color: white;
    font-family: Herculanum, "Eras Demi ITC", sans-serif;
    }
nav{
position: relative;
bottom: -550px;
left: 250px;
}   
nav ul {
    list-style: none;
    margin-right: -50px;
    }
li  {
display: inline;
border: 2px solid rgb(256,256,256);
font-family: Herculanum, "Eras Demi ITC", sans-serif;
font-size:25px;
border-top-left-radius:1em;
border-top-right-radius:1em;
background-color: #A3A3A3;
padding: 10px 20px;
}

nav li a:hover {text-decoration:none ;}
nav li a:visited {color: rgb(256,256,256);}
nav li a:link {text-decoration:none; color: #989898;}

h3 {
text-decoration:none ;
text-align: center;
position: absolute;
background-color: #A3A3A3;
position: relative;
bottom: -550px;
color: white;
}

回答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;
}

回答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;
}

来源：https://stackoverflow.com/questions/24311839/proper-css-positioning-help-needed

标签

html

css

positioning