Header image

No room listing would be complete without a big, glossy image to show it off. We've got a header image in our mock listing that we'll now include. Add this markup to the page.

index.html:

<p id="app">
  <p class="header">
    <p class="header-img"></p>
  </p>
  <p class="container">...</p>
</p>

And this to the CSS file.

style.css:

.header {
  height: 320px;
}

.header .header-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color: #f5f5f5;
  height: 100%;
}

You may be wondering why we're using aprather than animgtag. To help with positioning, we're going to set our image as the background of thepwith theheader-imgclass.