Question

如何在整个页面高度上制作背景图像。我得到了宽度，但没有高度。这是我的代码。

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

看我的背景图片是全宽，但它重复它的高度。我试过没有重复，但它只留下一个空格请帮助

Answer 1

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

如何在整个页面上制作背景图像

1 个答案: