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 に答える