HTML/CSS：如何在 header 下方显示 100% 宽度和 100% 高度的背景图片

Question

我想在 header 下面放一张背景图片。图片应该覆盖所有的宽度和高度，但不应该覆盖header。但是，背景图片不显示。我的代码有什么问题？？感谢您抽出宝贵时间我的代码如下；

下面是我的html部分；

<body>

<header>
  <p class="btn1"><img src="images/thumb2.jpg" class="skypic" alt="skypic"><span class="stext">picA</span></p>
  <p class="btn2"><span class="king"><img src="images/king.png"></span><a href="xxx.php"><img src="images/B.jpg"></a></p>
</header>

<div id="wrapper" class="stampwrap">

</div>
</body>

下面是我的部分 css；

body{
  font: 14px/1.6 sans-serif;
  color:#313131;
  background: #67b2e4;
}

header{
  display: block;
  overflow: hidden;
  height: 80px;
  background: #67b2e4;
  padding: 2% 4%;
}

.btn1{
  float:left;
}

.btn1 .stext {
  font-size: 2rem;
  font-weight: bold;
  padding-left: 20px;
  float:right;
  margin-top: 20px;
}

.btn2{
  float: right;
}

.skypic{
  height: 80px;
  width: auto;
}

#wrapper{
  height: 100%;
  width:100%;
  background: url(images/zzz.jpg);
}

.stampwrap{
  position: relative;
}

Answer 1

您需要定义 body 元素的高度。 wrapper class 没有 space 可查看。 height:100%; 在具有 height:0px; 的父 body 元素中看不到，如果未定义，这是默认值。

HTML/CSS：如何在 header 下方显示 100% 宽度和 100% 高度的背景图片

HTML/CSS: How to show a background picture that has 100% width and 100% height below a header

html

css

background

height

width