如何在包含全宽图像的标题内叠加文本

Question

使用包含的两个文件，当我使用类mainImage时，我在网页的标题中没有得到任何图像，但是当我只使用CSS中的标题时，我得到了我页面上的图像。有人可以解释原因吗？

另外，当我在标题中成功获取图像时，如何在标题内部（图像上方的图层）中获取文本？目前，文字在标题图片上方。

* {
  background-color: #ebebeb;
  color: #222222;
  margin: 0;
  padding: 0;
}


/*  When I use .mainImage and comment out header from line 16, I receive no image in the header of the web page.
    .mainImage {
    	background-image: url('/images/snowy-mountain-wide.jpg');
    	background-repeat: no-repeat;
    	background-size: cover;
    	max-width: 100%;
    	padding-bottom: 9%;
    }
    */

header {
  background-image: url('/images/snowy-mountain-wide.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 100%;
  padding-bottom: 9%;
}

p {
  font-family: cursive, sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  margin-left: 10px;
  margin-right: 10px;
  text-indent: 5em;
}

<div class="wrapper">
  <!--#include file="header.html"-->
  <header class="mainImage" alt="Mountain">
    <div class="header">

      This is a test that should be in the head.

    </div>
  </header>

  <div id="body">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>