background-imageプロパティの説明
CSSのbackground-imageプロパティは、要素の背景にひとつ以上の画像を指定します。画面に対して先頭に記述された画像が最も手前に表示され、順に複数のレイヤーを重ねた状態で配置されます。
background-colorを併記する場合は、背景画像の裏に敷かれます。つまり、背景画像が表示されている範囲の背景色は画面には表示されません。それでも背景色を同時に指定する意味はあります。何らかの理由で画像が読み込めなかった時に、代替色として表示されます。
また、グラデーションを背景に使用する場合も、このプロパティを使います。なぜなら、グラデーションは画像扱いになるため、background-colorでは指定できないからです。
背景関連のプロパティを一括で指定する場合は、ショートハンド・プロパティのbackgroundを使用して下さい。
background-imageに指定できる値
none- 背景画像を使用しないことを示します。これが初期値です。
<image>- 画像を表すデータ型の指定値です。画像をURLで指定する型やグラデーションを定義する型などがあります。使用できる形式には以下のようなものがあります。
url()：画像ファイルをURLで指定しますlinear-gradient()：線形のグラデーションを指定しますradial-gradient()：放射状に広がるグラデーションを指定しますconic-gradient()：中心を軸に回転するグラデーションを指定しますcross-fade()：複数の画像を指定の透過度で合成します
background-imageの使い方とサンプルコード
background-imageプロパティの構文は以下の通りです。
/* キーワード値 */
background-image: none;
/* URL値 */
background-image: url(/images/bg.png);
/* グラデーション */
background-image: linear-gradient(#f00, #00f);
background-image: radial-gradient(to right, rgba(0,0,0,.5), rgba(255,255,255,.5));
/* 画像とグラデーション */
background-image: linear-gradient(#f00, #00f), url(/images/bg.png);
/* グローバル値 */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: unset;
background-imageの実例
それでは実際に背景画像を指定した要素を見てみましょう。背景画像は要素の幅と高さの内側に表示されるため、意図通りの位置に背景が表示されるようにスタイルを調整しましょう。
<div class="samp_box">
<div id="bg_1">
<p>background-image test</p>
</div>
</div>
.samp_box {
padding: 1rem;
background-color: #ccc;
text-align: center;
}
.samp_box > div {
padding: 2rem 1rem;
background-image: url(/images/sample_photo_1200x630.jpg);
}
背景にグラデーションを指定する
グラデーションを使用する場合は、linear-gradient()やradial-gradient()を使います。線形のグラデーションでは、次のようなバリエーションが作り出せます。
#bg_1 {
background-image: linear-gradient(cyan, magenta);
}
#bg_2 {
background-image: linear-gradient(to right, cyan, magenta);
}
#bg_3 {
background-image: linear-gradient(to bottom right, cyan, magenta);
}
#bg_4 {
background-image: linear-gradient(45deg, cyan, magenta);
}
#bg_5 {
background-image: linear-gradient(#f00, #ff0, #cf0, #0f0, #0cf, #00f);
}
#bg_6 {
background-image: linear-gradient(#ff0, 75%, #0ff);
}
#bg_7 {
background-image: linear-gradient(#ff0, 25%, #0ff);
}
#bg_8 {
background-image: linear-gradient(#ff0 50%, #0ff 50%);
}
放射状のグラデーションを指定する場合は、以下のように記述します。
#bg_1 {
background-image: radial-gradient(cyan, magenta);
}
#bg_2 {
background-image: radial-gradient(#ffc 50%, #03a 75%, #09f 90%);
}
#bg_3 {
background-image: radial-gradient(at 0% 50%, #f00 25%, #ffc 75%);
}
#bg_4 {
background-image: radial-gradient(ellipse closest-side, cyan, magenta);
}
#bg_5 {
background-image: radial-gradient(circle closest-side at 10% 50%, #0ff, #ff0);
}
背景画像とグラデーションの併用
背景画像とグラデーションを併用することもできます。例えば、透過範囲を持つロゴ画像の後ろにグラデーションを敷くと、以下のような効果が得られます。
.samp_box > div {
padding: 2rem 1rem;
background-image: url(/images/logo_square_200x200.png), linear-gradient(#fff, 85%, #0cf);
background-repeat: no-repeat;
background-size: contain;
}