ヘッダーの基本レイアウト | The basic layout of the header is explained here.

ヘッダー画像にテキストを重ねたレイアウ

HTML <div class=”header”>
<h1><a href=”#”>SITE</a></h1>
<p>キャッチフレーズ</p>
</div>

CSS .header {
height: 280px;
padding: 50px 20px 20px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #dfe3e8;
background-image: url(header.jpg);
background-position: 58% 53%;
background-size: cover;
}
.header h1 {
margin:0;
font-size: 30px;
line-height: 1;
}
.header h1 a {
color: #000;
text-decoration: none;
}
.header p {
margin: 8px 0 0 0;
font-size: 12px;
line-height: 1;
}

用意された画像は1500×500ピクセルですが、背景画像を<div>内に収まる大きさで表示するため、background-sizeをcoverと指定しています。

背景画像の拡大縮小の中心となるポイントは標準では左上です。このポイントはbackground-positionで変更することができる。ここでは58％　53％としており、左から横58％、上から縦53％、ここを中心に拡大縮小が行われるようになる

この本から引用、参考に学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円程ならコスパよく、買っておいてよかったと満足してます。