背景画像の上にテキストをかぶせる #CSS

背景画像の上にテキストをかぶせたい時のサンプル。
background-image: url(URLを記入);で背景画像を指定。
background-size: cover;で表示範囲を埋めるように画像を拡大・縮小。

HTML

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <header>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <h1>タイトル</h1>
        <p>説明文です。</p>
      </div>
    </div>
    <div class="lesson-wrapper">
    </div>
    <div class="message-wrapper">
    </div>
    <footer>
    </footer>
  </body>
</html>

CSS

stylesheet.css

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN";
}

a {
  text-decoration: none;
}

.container {
  width: 1170px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

.top-wrapper {
  padding-top: 180px;
  padding-bottom: 100px;
  background-image: url(URLを記載);
  color: white;
  background-size: cover;
}