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

【问题标题】：HTML/CSS: How to show a background picture that has 100% width and 100% height below a headerHTML/CSS：如何在标题下方显示 100% 宽度和 100% 高度的背景图片
【发布时间】：2018-04-19 11:26:11
【问题描述】：

我正在尝试在标题下方放置背景图片。图片应该覆盖所有的宽度和高度，但不应该覆盖页眉。但是，背景图片不显示。我的代码有什么问题？？感谢您抽出宝贵时间我的代码如下；

下面是我的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;
}

【问题讨论】：

标签： html css background height width

【解决方案1】：

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

【讨论】：

感谢您的 cmets！我在 body 元素上添加了height: 100%;，但它仍然不能正常工作，你能猜到为什么吗？
尝试嵌套在<div> 而不是<p>。 <p> 元素用于文本，而不是图像。而且我不能 100% 确定 <a> 是否可以调用 .php 文件。