如何制作整个页面高度的背景图像。我知道了宽度，但没有高度。这是我的代码。
<! DOCTYPE html/>
<html>
<head>
<title> Singapore! </title>
<style>
*
{
margin:0px;
padding:0px;
}
div.background
{
background: url('singaporebackground.jpg');
background-size: 100% auto;
height: 1000px;
padding-top: 50px;
}
div.transbox
{
margin: 0px 225px;
width: 60%;
height: 100%;
background-image: linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%);
background-image: -moz-linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%);
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%);
background-image: -ms-linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.24, rgb(255,255,255)),
color-stop(0.39, rgb(130,130,130)),
color-stop(0.81, rgb(0,0,0)));
border-top: 5px solid black;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background" />
<div id="header" />
<!--<img src="finishedsingaporelogo.jpg" /> -->
</div>
<div class="transbox" />
<p> Content </p>
</div>
</div>
看到我的背景图片是全宽的，但它重复了它的高度。我已经尝试过不重复，但是只留下了空白，请帮助
最佳答案
您可以完全定位并使用background-size: cover：
div.background {
background: url('singaporebackground.jpg');
background-size: cover;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
演示：http://jsfiddle.net/gWQv4/
关于css - 如何制作整个页面的背景图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13326219/