「background-image」は、要素の背景領域に、画像やグラデーションを設定するためのCSSプロパティです。
背景画像を設定する background-image
このプロパティは「背景の装飾」という目的だけでなく、そもそも「画像を適切にレイアウトする」ための１つの手法として非常に多く利用されます。例えば、
- 画像の要素内での中央寄せ、および上下左右寄せの配置
- 画像のクロッピング（要素からはみ出た部分を切り落とす）
- 画像の表示サイズ調整
などのレイアウト調整は、すべてbackground 関連のCSSプロパティを利用して実現できるため、画像表示における表示設定を、スタイルシート内の一箇所に一元化し、簡素に記述できるのです。もちろん上記は、imgタグを使って行うこともできますが、background-imageで設定した画像で行うほうが、遥かに手軽で簡単だと感じるでしょう。
background-image の使用例
背景画像のURLを指定する
背景画像は、「url()」というCSSの関数に、画像のURL文字列を引き渡することで指定できます。下記は、背景画像「cat.jpg 」を高さ300px のブロック要素の背景に指定する例です。
<div class="box"></div>
<style>
.box{
height:300px;
background-image:url(https://www-creators.com/wp-content/uploads/2017/10/cat.jpg);
}
</style>背景に関するの関連CSSプロパティとの連携させる
background-image は、CSSプロパティbackground-size、background-image、background-repeatと連携し、各設定値をもとに最終的な表示方法が決定されます。詳しくは、各プロパティのページをご覧ください。
例えば、下記のような記述で、指定したサイズの画像を上下左右方向にセンタリングして表示します。
<div class="box"><div>
<style>
.box{
height:300px;
background-image: url(https://www-creators.com/wp-content/uploads/2017/10/cat.jpg);
background-position:center;
background-size:100px;
background-repeat:no-repeat;
}
</style>下記はよく使う例で、background-size で「cover」を利用することで、要素内に隙間なく画像を表示し、同時に background-position に「center」を指定することで、中央寄せを実現しています。
<div class="box"></div>
<style>
.box{
height:300px;
background-image:url(https://www-creators.com/wp-content/uploads/2017/10/cat.jpg);
background-size:cover;
background-position:center;
}
</style>背景色（background-color）レイヤーとの共存させる
また、background-image は background-color と共存する事ができます。ネットワークの問題により画像のロードが遅延したり、失敗したときのために、背景色も同時に指定しておくと良いでしょう。例えば、下記のような背景パターン類似の色を背景色に指定する手法はよく用いられます。そうすることで、モバイルの低速度な通信速度に置いても、ユーザ体験をある程度保証できます。
<div class="box"></div>
<style>
.box{
height:300px;
background-color:#e7dcca;
background-image:url(https://www-creators.com/wp-content/uploads/2017/10/vintage.png);
background-size:200px auto;
background-repeat:no-repeat; /* 注：通常はリピートします */
}
</style>複数の背景レイヤーを設定する
カンマを利用して背景の指定を列挙することで、同じ要素内に複数の背景を設定することもできます。この場合、他の background-position、 background-repeat、 background-size などの関連するbackgroundプロパティも、同じようにカンマで区切って複数の指定を行います。
<div class="box"></div>
<style>
.box{
height:300px;
background-image:
url(https://www-creators.com/wp-content/uploads/2017/10/cat.jpg),
url(https://www-creators.com/wp-content/uploads/2017/10/wall.png);
background-size: 90px, auto;
background-repeat: no-repeat, repeat;
background-position: center, 0;
}
</style>背景にグラデーションを設定する
CSS関数「linear-gradient()」や「radial-gradient()」を使ってグラデーションを描画します。それぞれ、線形（まっすぐな）グラデーションと、中央から放射上に広がるグラデーションです。
<div class="box linear"></div>
<div class="box radial"></div>
<style>
.box{
height:150px;
}
.box.linear{
background-image: linear-gradient(
135deg,
#1e5799 0%,
#2989d8 50%,
#7db9e8 100%
);
}
.box.radial{
background-image: radial-gradient(
ellipse at center,
#1e5799 20%,
#7db9e8 80%);
}
</style>上記の通り、グラデーション関数の引数の指定方法はやや複雑です。より詳しいグラデーションの記載方法に関しては、こちらを参照して下さい。
実用における注意点
画像のURLの記述方法について
URLは、クオーテーションやダブルクオーテーションで囲む記法も認められています。下記は全て同義です。
.container{
background-image: url(https://www-creators.com/wp-content/uploads/2017/10/cat.jpg),
background-image: url(https://www-creators.com/wp-content/uploads/2017/10/cat.jpg),
background-image: url(https://www-creators.com/wp-content/uploads/2017/10/cat.jpg),
}画像のパスは、絶対パスか、このスタイルが記述されているファイルからの相対パスになります。もし、このスタイルが「http://example.com/css」ディレクトリに置かれたファイルに記載されているのであれば、下の２つは同義です。
.container{
background-image: url(http://example.com/images/cat.jpg)
background-image: url(../images/cat.jpg)
}background-image が取りうる値
| 値 | 説明 |
|---|---|
| url(<画像のURL>) | 背景画像を指定。パスはCSSファイルからの相対パスか、絶対パスを利用できる。また、カンマで区切ることで複数指定できる。 例）url(img/background.png); 例）url(img/background-1.png), url(img/background-2.png) |
| none | 背景画像なし |
仕様書
このページは、下記の仕様書に基いています。仕様書のステータスと、ブラウザの実装状況は、随時ご確認下さい。