2

如何使背景图像成为整个页面高度。我得到了宽度，但没有得到高度。这是我的代码。

<! 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>

看到我的背景图片是全宽的，但它重复了它的高度。我试过不重复，但它只留下一个空白，请帮忙

4

1 回答 1

2

你绝对可以定位它并使用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/

于 2012-11-10T21:29:27.827 回答