ここではヘッダー部分などに設定する背景画像を100%表示させる方法と、背景画像の設定に関するスタイルシートの仕組みについてお話します。
コンテンツ
背景画像を100%表示する方法
まずは、結論だけ知りたい方のためにソースコードを見ていただこうと思います。多分、このページをご覧の方が望んでいる設定は下記の２つのどちらかだと思います。
常に領域全体を背景画像がカバーする設定
これはブラウザの幅がどのように変化しても常に領域全体を画像がカバーするように設定したものです。ポイントとなる部分は、background-size:cover;という値です。
CSS
.wrap07{
background-size:cover;
background-position:50%;
}
background-size:cover;を指定すると背景領域がどのようなサイズになっても常に領域全体に画像が表示されるように画像サイズが調整されます。
常に背景画像全体を表示する設定
CSS
.wrap08{
background-repeat:no-repeat;
background-position:50%;
background-size:contain;
}
もしかしたら、背景領域を画像がカバーすることよりも画像全体が常に表示されることを重視する場合もあるかもしれません。この場合は、上記のような設定をします。ポイントとなるのは、background-size:contain;という値です。この値を指定すると背景領域がどのようなサイズになっても常に画像全体がブラウザに表示されるように画像サイズが調整されます。
スタイルシートの背景画像の仕組み
さて、上記のようなソースコードを単にコピペするだけでも結果としては良いかもしれませんが、背景画像の設定についてしっかり理解しておいた方が今後のためになると思います。これから背景画像を設定する仕組みについて順に見ていきましょう。
backgroundプロパティ
背景に色を付けたり画像を表示させたりするには、backgroundプロパティを使います。
背景色の設定
CSS
.wrap01{
background:#FFCAE0;
}
背景領域に色を付けたいときは上記のようにbackgroundプロパティの値に色を指定します。
背景画像の設定
CSS
.wrap02{
background: URL("https://cotodama.co/wp-content/uploads/2017/12/background-image-100pph.png");
}
背景画像を指定したいときは、backgroundプロパティの値にURL("画像URL")という形で画像URLを入力します。ちなみに、背景画像と背景色の値を半角スペースを入れて２つ指定すると２つを同時に指定することができます。順番はどちらから指定しても問題ありません。
.example{
background: URL("画像URL") 背景色;
}
背景画像の繰り返し設定｜background-repeatプロパティ
先ほどの背景画像は初期設定で画像が繰り返し表示される（リピート）設定になっていましたが、画像を１回だけ表示させたいときは、background-repeatプロパティの指定をします。
CSS
.wrap03{
background-repeat:no-repeat;
}
このように値にno-repeatを指定すると背景画像の繰り返しを止めることができます。background-repeatの設定は他にもあります。
background-repeat: repeat; タテにもヨコにも繰り返して表示（初期値）
background-repeat: repeat-x; ヨコ方向だけに繰り返して表示
background-repeat: repeat-y; タテ方向だけに繰り返して表示
背景画像を中央表示する方法
背景画像は、初期値で左上に配置されるようになっています。これを上下左右ともに中央に表示させたいときはbackground-positionプロパティを使います。
CSS
.wrap04{
background-position:50%;
}
背景画像は、background-positionプロパティの値に50%を指定するだけで上下左右ともに中央に寄せることができます。
背景画像のサイズを決めるbackground-sizeプロパティ
背景画像の横幅を100%で指定
画像の高さはもともとの画像比率が保たれます。つまり、高さはautoを指定したのと同じ状態になります。
.wrap05{
background-size:100%;
}
background-sizeプロパティは、値を１つだけ指定した場合はヨコのサイズ、スペースを入れて２つ指定した場合は、左からヨコ・タテのサイズを指定したことになります。ここでは、100%という形で１つだけ指定したので、横幅が100%になりました。
背景画像の高さを100%で指定
今度は、背景画像の高さが100%になることを優先した設定をしてみました。
.wrap06{
background-size:auto 100%;
}
先ほどは、値を１つだけ指定しましたが高さを指定する場合は、タテとヨコのサイズを２つとも指定する必要があります。
常に領域全体をカバーする設定
.wrap07{
background-size: cover;
}
冒頭でご紹介した設定です。coverを指定すると画像の縦横の比率を保持した状態で背景領域全体を常に画像がカバーするように画像サイズが調整されます。
常に画像全体を表示する設定
.wrap08{
background-size: contain;
}
冒頭でご紹介した２つ目の設定です。containを指定すると画像の縦横の比率を保持した状態で常に画像全体が表示されるように画像サイズが調整されます。
以上が背景画像の設定に関するお話でした。
