ヘッダー画像にテキストを重ねたレイアウト | Layout with text overlaid on header image

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と指定しています。| The prepared image is 1500 x 500 pixels, but the background-size is specified as cover in order to display the background image in a size that fits in the <div>

背景画像の拡大縮小の中心となるポイントは標準では左上です。このポイントはbackground-positionで変更することができる。ここでは58％　53％としており、左から横58％、上から縦53％、ここを中心に拡大縮小が行われるようになる。| The prepared image is 1500 x 500 pixels, but the background-size is specified as cover in order to display the background image in a size that fits in the <div>

やっぱり詳しい人から深く学びたい人はこちらをどうぞ。| If you want to learn more from those who are familiar with it, please click here.