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

I am trying to put a background picture below the header. The picture is supposed to cover all the width and height, but should not cover the header. However, the background picture does not show up. What’s wrong in my code?? Thank you for taking your time My codes are below;

Part of my html is below;

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

and part of my css is below;

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;
}

Solution

You need to define the height of the body element. the wrapper class has no space to be viewed. height:100%; cannot be seen in a parent body element with height:0px; which is the default if not defined.