背景に関するプロパティの中に、background-imageプロパティがあります。
background-imageプロパティは、背景に画像を表示させる際に使用するプロパティですが、CSS3から、画像の重ね表示やグラデーションの指定もできるようになりました。
今回は、このbackground-imageプロパティについてまとめたいと思います。
背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background 】1～背景プロパティの種類とbackground-color
CSS【 background 】2～background-imageでレイヤーやグラデーションも（本ページ）
CSS【 background 】3～background-repeat、background-attachment
CSS【 background 】4～background-position
CSS【 background 】5～background-size
CSS【 background 】6～background-clip、background-origin
CSS【 background 】7～背景に関するショートハンドプロパティ
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
background-imageプロパティは、背景画像を指定する際に使用します。
背景に重ね画像やグラデーションを指定する場合も、background-imageプロパティを使用します。
background-imageプロパティで指定する値には、次のようなものがあります。
| none | 背景画像なし（デフォルト値） |
|---|---|
| url(画像のURL) | 表示する画像ファイルのURL |
| linear-gradient() | ()内に色や位置等を記載して線形グラデーションを指定 |
| radial-gradient() | ()内に色や位置等を記載して円形グラデーションを指定 |
background-imageプロパティの値は、継承されません。
また、background-imageプロパティは、全ての要素で使用できます。
上の画像を背景に指定すると、次のような表示になります。
ソースは次の通りです。
<!-- CSSファイル -->
div#sample {
margin:0;
padding:2em;
background-color:#6CF;
background-image:url(img/sky.jpg);}
<!-- HTMLファイル -->
<div id="sample">
background-image:url(img/sky.jpg);
</div>
background-colorプロパティで、背景色を指定しています。
背景色を指定してbackground-imageプロパティで画像を指定すると、背景色の上に画像が表示されます。
レイヤーの構造として、背景色は一番下となります。
CSS3から、background-imageプロパティで重ね画像を指定できるようになりました。
画像のURLをカンマ（,）で区切って指定します。
レイヤーの構造としては、先に指定した画像が上に表示されます。
先ほどの画像の前に、上の画像を指定すると、次のような表示になります。
ソースは次の通りです。
<!-- CSSファイル -->
div#sample {
margin:0;
padding:2em;
background-color:#6CF;
background-image:url(img/snow.jpg),url(img/sky.jpg);}
<!-- HTMLファイル -->
<div id="sample">
background-image:url(img/snow.jpg),url(img/sky.jpg);
</div>
背景に複数の画像を使う場合は、CSS3に対応していない古いブラウザ対策として、background-colorプロパティを指定しておいた方が安心です。
CSS3から、background-imageプロパティで背景にグラデーションも指定できるようになりました。
線形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色を定義して作成します。
背景に線形グラデーションを設定したい場合は、background-imageプロパティにlinear-gradient()を指定します。
linear-gradient()は関数で、次のように()内を指定します。
linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);
指定が必須なのは、開始色と終了色のみで、色の指定方法はCSSの色指定と同じです。
開始位置と角度のデフォルト値は「180deg to bottom」で、上から下という意味です。
角度はdegという単位を使います（デフォルト値は180deg）。
下から上の方向が0、そこから時計回りで左から右の方向が90deg、上から下の方向が180deg、右から左の方向が270deg、となります。
方向は、toとleft、right、top、bottomを組み合わせて使います（デフォルト値はto bottom）。
to right bottom（右斜め下へ）というような指定もできます。
線形グラデーションを指定すると、次のような表示となります。
ソースは次の通りです。
<!-- CSSファイル -->
div#sample {
margin:0;
padding:2em;
background-color:plum;
background-image:linear-gradient(#FFFAFA, #969);}
<!-- HTMLファイル -->
<div id="sample">
線形グラデーション
</div>
背景に線形グラデーションを指定する場合も、CSS3に対応していない古いブラウザ対策として、background-colorプロパティを指定しておいた方が安心です。
また、途中色を複数指定して、次のようなグラデーションを表示することもできます。
CSSソースのグラデーション指定箇所は次の通りです。
background-image:linear-gradient(to left, red, orange, yellow, green, slateblue, purple, violet);
円形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色、グラデーションの形状を定義して作成します。
背景に円形グラデーションを設定したい場合は、background-imageプロパティにradial-gradient()を指定します。
radial-gradient()は関数で、次のように()内を指定します。
radial-gradient(形状またはサイズ at 開始位置, 開始色, 途中色, 終了色);
指定が必須なのは、開始色と終了色のみで、色の指定方法はCSSの色指定と同じです。
| 形状 | ellipse(楕円）･･･デフォルト値 circle(円) |
|---|---|
| サイズ | farthest-corner(一番遠い角に合わせる)･･･デフォルト値 closest-side(一番近い辺に合わせる) closest-corner(一番近い角に合わせる) farthest-side(一番遠い辺に合わせる) |
| 開始位置（円の中心点） | center･･･デフォルト値 left right top bottom ◯％ ◯％ ◯px ◯px |
円形グラデーションを指定すると、次のような表示となります。
ソースは次の通りです。
<!-- CSSファイル -->
div#sample {
margin:0;
padding:2em;
background-color:plum;
background-image:radial-gradient(crimson,plum);}
<!-- HTMLファイル -->
<div id="sample">
円形グラデーション
</div>
背景に円形グラデーションを指定する場合も、CSS3に対応していない古いブラウザ対策として、background-colorプロパティを指定しておいた方が安心です。
また、円の中心点の位置を変えて、次のようなグラデーションを表示することもできます。
CSSソースのグラデーション指定箇所は次の通りです。
background-image:radial-gradient(circle closest-corner at 25% 25%, crimson,plum);
INTERNOUS,inc. All rights reserved.
