工作网址:
http://69.24.73.172/demos/water/home.htm
我无法让背景图像的高度垂直拉伸(stretch) 100%，演示 url 显示了这一点。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Buy Fair Water - From Charity Water
</title>
<link rel="stylesheet" href="default.css" />
<meta name="description" content="Charity Water is a way of buying bottled water, the fair way. Why buy from large corporations that hunt profits, when you can buy water in a way that benefits everyone." />
</head>
<body>
<div class="main-wrapper">
<div class="main-content">
<header>
<a class="logo" href="home.htm" title="Homepage for Charity Water">
<img src="images/logo.png" alt="Charity Water Logo" />
</a>
</header>
<div class="content">
<h1>Charity Water</h1>
<h2>What we do</h2>
<p>wfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wef</p>
<h2>What we do</h2>
<p>wfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wef</p>
<h2>What we do</h2>
<p>wfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wef</p>
<h2>What we do</h2>
<p>wfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wef</p>
</div>
<img src="images/footer.png" />
</div>
</div>
<div class="menu">
<nav>
<ul>
<li><a href="home.htm" title="Home of Charity Water">Home</a></li>
<li class="selected"><a href="about.htm" title="Chairty Water is a way of buying bottled water fairly">About Us</a></li>
<li><a href="products.htm" title="A wide selection of water based products">Products</a></li>
<li><a href="faq.htm" title="What is Charity Water? Where does the money go?">FAQ</a></li>
<li><a href="contact.htm" title="Contact information for Charity Water">Contact</a></li>
</ul>
</nav>
</div>
<div class="drop" title="Plip!"></div>
<div class="drop" style="top:400px;" title="Plop!"></div>
</body>
</html>
CSS
body
{
background:#E0E4CC;
background-image: url(images/background.png);
background-repeat:repeat-x;
margin:0;
padding:0;
font-family:Arial, Verdana;
height: 100%;
}
html
{
height:100%;
}
img
{
border:0;
}
.main-wrapper
{
width:818px;
margin:0 auto;
background-image: url(images/mainbox.png);
height: 100%;
}
.main-content
{
width:750px;
margin:0 auto;
background:white;
text-align:center;
height: 100%;
}
.content
{
position:relative;
top:130px;
padding:0 20px 20px 20px;
text-align:left;
margin-bottom:50px;
}
.menu
{
background:url(images/menu.png);
width:781px;
height:61px;
position:absolute;
left:50%;
margin-left:-391px;
top:160px;
}
.menu ul
{
list-style:none;
margin-left:20px;
}
.menu ul li
{
float:left;
font-size:22px;
position:relative;
top:-12px;
margin-right:40px;
}
.menu ul li a
{
color:White;
text-decoration:none;
text-shadow: 1px 1px #5EBCCF;
position:relative;
top:19px;
}
.selected
{
text-align:center;
width:120px;
height:77px;
background-image:url(images/bubble.png);
position:absolute;
background-position: 0 0px;
background-repeat:no-repeat;
}
.selected a
{
text-shadow: 1px 1px #E05E00 !important;
}
h1
{
color:#5EBCCF;
font-size:43px;
font-weight:normal;
text-shadow: 1px 1px #C9CCB7;
}
h2
{
color:#5EBCCF;
font-size:23px;
font-weight:normal;
text-shadow: 1px 1px #C9CCB7;
padding-left:20px;
}
p
{
width:550px;
font-size:17px;
margin: 0 auto;
}
.drop
{
width:33px;
height:68px;
background-image: url(images/drop.png);
position:absolute;
left:50%;
margin-left:320px;
top:200px;
}
.logo
{
position:relative;
top:30px;
}
感谢任何帮助!
最佳答案
我建议放弃尝试让它作为 body 背景图像，而是创建一个图像并使用 position:fixed 和 z-index 属性来伪造它，就像这位先生推荐的:http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
关于HTML 无法让背景图片包裹 100% 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5445843/