ウィンドウ幅いっぱいのヘッダー画像。
サイトのヘッダーに、ロゴやタイトルの背景として大きな画像をウィンドウ幅いっぱいに表示する、ブログの記事ページなどでわりと見かけるタイプのレイアウトについてのメモです。ここでは、ヘッダー画像がウィンドウの上半分を埋めるようにレイアウトされる、下図のようなデザインを作ることにします:)。
背景画像として表示する方法。
まずは一番シンプルな方法、CSSのbackgroundプロパティを使って、背景画像として表示する方法です。
HTML
ヘッダー部分のHTMLは以下のとおり。ヘッダーの中には、ページタイトルと、画像のライセンス表記を入れました。
<header>
<h1>Halfscreen Photo Header</h1>
<small class="caption">license</small>
</header>CSS
まずはheader要素にposition: relativeを指定して、ページタイトルとキャプションを絶対配置する時に、header要素を基準として位置を決められるようにしておきます。
続いて、header要素の高さがウィンドウの上半分を埋めるように、height: 50vhと指定。vhは、“ウィンドウの高さ”を表す単位で、常にウィンドウの高さを基準とした割合でもってサイズを指定できて便利なのです;)。
header {
position: relative;
height: 50vh;
}表示する画像は、backgroundプロパティを使って、背景画像として指定します。background-sizeプロパティのcoverという値を指定すれば、背景画像がheader要素を埋めるように配置されるので、これだけで「画面めいっぱい表示」ができちゃうんですねー:D。ここではbackgroundプロパティで、[image] [position] / [size]をまとめて指定してます。
header {
background: url(../img/background.jpg) center / cover;
}あとは、上に重ねる文字が読みやすいように、header要素の::after擬似要素を使って、半透明のスクリーントーンを作って、写真の上全体を覆うように配置します。
スクリーントーンの模様は、background-imageプロパティで円形グラデーションを描画することができるradial-gradient()関数を使って作っています。
ページタイトルはヘッダーの中央に絶対配置、ライセンス表記は写真の右下に絶対配置。ともに、半透明スクリーンの下に隠れてしまわないようにz-index: 1;を指定しておくのも忘れずに。
で、いっちょあがり！
background-imageだけHTMLで指定する
ヘッダー画像をCSSで指定するのはなんだか更新性に欠けるので、CSSではデフォルト画像を指定しておいて、ページごとに、background-imageだけ直接記述するようにする方が実用的かなと思います:)。
header {
background: url(../img/default.jpg) center / cover;
}<header style="background-image:url(img/background.jpg)">
︙
Comment & Pingback