Question

基本上我要做的就是让我的背景图片填满页面并在我的页脚顶部放置导航，并且两者都保持在底部。我尝试了很多不同的东西，我似乎可以正确地定位它们。我有一个非常基本的证据，我希望我的网站看起来像但我不能发布图片...任何帮助非常感谢。

这是我目前的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>

我的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;
}

Answer 1

这是你在找什么？

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

为了使图片覆盖body元素的背景，您需要将其设为background-size: 100% 100%和background-repeat: no-repeat（如果背景设置为repeat，浏览器重复图像而不是拉伸它。）

要告知body背景的大小是100％，您需要为body及其父元素html指定一个大小。在这种情况下，这将是width: 100%;和height: 100%;。这可以确保浏览器知道图像的大小。

<强> 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;
}

Answer 2

您可以添加以下CSS，其中包含图像的整个浏览器背景。

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

需要适当的CSS定位帮助

2 个答案: