background-imageとは
- background-image とは次の語句からなるCSSのプロパティです。
- background
- 読み: バックグラウンド
意味: 背景 - image
- 読み: イメージ
意味: 画像
background-imageの概要
このプロパティは要素の背景に一つ以上の画像データを指定することができます。
構文
サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。
セレクター{background-image: イメージ関数}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
このサンプルでは、div要素を使用しています。 またCSSの初期設定で、下記のプロパティを設定しています。
- background-size: 100%;
- background-position: bottom;
- background-repeat: no-repeat;
初期値: none
初期値の none キーワードは、画像を表示しません。
div{background-image: none;}image関数: url関数
背景に画像ファイルを使用する場合には、このプロパティにurl関数を使います。
url関数は、引数に画像ファイルのURLを指定する事で、その画像ファイルを読み込むことができます。
div{
background-image: url(画像ファイルのURL);
}image関数: linear-gradient関数
背景に直線状のグラデーション画像を使用する場合には、このプロパティにlinear-gradient関数を使うこともできます。
参照: linear-gradient
div{
background-image: linear-gradient(red, blue);
}応用: 二つ以上のurl関数の組み合わせ
二つ以上の背景画像を指定する場合には、カンマで区切り最初に指定したレイヤーがユーザー側から見て手前に配置されます。
div{
background-image: url(画像ファイルのURL), url(画像ファイルのURL);
}
応用: url関数とlinear-gradient関数の組み合わせ
url関数とlinear-gradient関数の組み合わせにすると、下記のサンプル画像のようになります。
div{
background-image: url(画像ファイルのURL),
linear-gradient(rgb(255, 105, 180), rgb(255, 255, 0));
}
url関数とlinear-gradient関数の指定が逆に指定した場合には、url関数の背景画像は後ろに隠れてしまい表示されません。 linear-gradientの色の指定をrgbaコードを使用て透過させることにより、背景画像が表示されます。
参考: background-color
div{
background-image: linear-gradient(rgba(255, 105, 180,0.3), rgba(255, 255, 0,0.3)),
url(画像ファイルのURL);
}
グローバル値
background-imageプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。
- inheritは親要素の値の継承を促します。
- initialは値を初期値のnoneに戻します。
-
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクターbackground-image: グローバル値;}補足説明
- すべての要素に適用可能
- 親要素の値を継承しない
まとめ
ここでは、検証としてブロック要素にCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。
background-image: none;
background-image: url(../images/nakayoshi_cats_couple.png);
background-image: linear-gradient(red,blue);
background-image: url(../images/welcome_balloon_text.png), url(../images/nakayoshi_cats_couple.png);
background-image: url(../images/nakayoshi_cats_couple.png), linear-gradient(rgb(255, 105, 180),rgb(255, 255, 0));
background-image: linear-gradient(rgba(255, 105, 180,0.3),rgba(255, 255, 0,0.3)), url('../images/nakayoshi_cats_couple.png');
サンプル: ブロック要素