background-image:背景画像やグラデーションを指定する
初期値 | none |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
background-imageプロパティの説明
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
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
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の実例
それでは実際に背景画像を指定した要素を見てみましょう。背景画像は要素の幅と高さの内側に表示されるため、意図通りの位置に背景が表示されるようにスタイルを調整しましょう。
CSS
.samp_box {
padding: 1rem;
background-color: #ccc;
text-align: center;
}
.samp_box > div {
padding: 2rem 1rem;
background-image: url(../images/sample_photo_1200x630.jpg);
}
HTML
<div class="samp_box">
<div id="bg_1">
<p>background-image test</p>
</div>
</div>
表示確認
背景にグラデーションを指定する
グラデーションを使用する場合は、linear-gradient()
やradial-gradient()
を使います。線形のグラデーションでは、次のようなバリエーションが作り出せます。
表示確認
CSS
#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%);
}
放射状のグラデーションを指定する場合は、以下のように記述します。
表示確認
CSS
#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);
}
背景画像とグラデーションの併用
背景画像とグラデーションを併用することもできます。例えば、透過範囲を持つロゴ画像の後ろにグラデーションを敷くと、以下のような効果が得られます。
CSS
.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;
}
表示確認
background-imageに関連するCSSプロパティ
背景(バックグラウンド) | |
---|---|
background | 背景に関する指定をまとめて行う |
background-attachment | 背景画像の固定・移動を指定する |
background-blend-mode | 背景色や背景画像の描画モードを指定する |
background-clip | 背景の描画範囲を指定する |
background-color | 背景色を指定する |
background-image | 背景画像やグラデーションを指定する |
background-origin | 背景画像を配置する基準点を指定する |
background-position | 背景画像の表示開始位置を指定する |
background-repeat | 背景画像の繰り返しを指定する |
background-size | 背景画像を表示するサイズ(大きさ)を指定する |
backdrop-filter | 要素の背後領域にぼかしや色変化などのフィルタ効果を与える |