前回はカラーコードを使用して文字の色や背景色を変える方法について紹介しました。
今回は背景を画像にする方法を記事にしたいと思います。
背景を画像にする『background-imageプロパティ』
background-imageプロパティを使用すると背景に画像にすることができます。記述としては
body{ background-image:url(###)}
というように使用します。
###の部分については表示したい画像があるURLもしくはHTMLを保存しているフォルダに入れている画像のパスを入力します。（詳細は別記事でまとめます）
また、###の部分にnoneと入力するとその部分だけ画像が表示されなくなります。
背景画像を繰り返し表示する『background-repeatプロパティ』
画像にはサイズが決まっており、デフォルトで画像は背景いっぱいを埋め尽くすようになっています。
background-repeatプロパティはその埋め尽くす方向もしくは繰り返さないかを指定することができます。
値の種類としては
・repeat(縦・横 繰り返す)
・repeat-x(横方向に繰り返す)
・repeat-y(縦方向に繰り返す)
・no-repeat(繰り返さない)
の4つがあります。
背景画像の大きさを変える『background-sizeプロパティ』
画像は上記の通りサイズが決まっていますがbackground-sizeプロパティではそのサイズを引き延ばしたり縮小したり、当てはめたりすることができます。
値に関しては数値に％やpx及びremなどの単位で指定するほか
キーワードでcover、containで指定することができます。
coverは「物を覆う」という意味があり、画像の縦横の比率をそのままに表示部分埋め尽くすように広がります。表示部分より大きい画像の場合はその部分が切れるようになっています。
containは容器などを「含む」という意味があり、画像の縦横比率をそのままに画像が全て表示されるようになります。
そのため表示部分と画像の大きさが違うと余白ができます。
背景画像の位置を指定する『background-positionプロパティ』
background-sizeプロパティは画像の表示される位置を指定します。方法は２つあり、1つ目が数値に単位をつけて
body{background-size: 30px 60px;}
のように最初の数値が横方向の指定（左から30px）、次の数値が縦方向の指定（上から60px）、そして数値間にスペースを開けて入力します。
2つ目がキーワードで
横方向は「left（左）center（中央）right（右）」
縦方向は「top（上）center（中央）bottom（下）」
で指定します。なので四隅に設置したい場合はキーワードを使用すると良いでしょう。
まとめて指定『background』
backgroudプロパティは上記の指定をまとめて指定することができます。指定したいプロパティを入力し、指定してないものについては初期値が反映されます。プロパティ間はスペースで区切ります。
body{backgroud:url(###) no-repeat center top/cover;}
上記で分かる通り、sizeの指定については最後に/の後に入力します。
以上が背景を画像にする方法になります。
次回は一番難しいところであります幅と高さの指定について紹介します。
