このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

background-image”プロパティ:背景画像

記事Aug. 29th,2018
July 7th,2020
背景画像を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 background-image: none;
適用対象 すべての要素
継承 No
パーセント値 パーセント値は指定できません
計算値 <image>”値の算出された値
アニメーション 離散

background-image”プロパティは背景画像を指定するプロパティです。

background-color”プロパティで指定された背景色がある場合は背景画像は背景色の手前に表示されます。

サンプルコード

div { background-image: url(background_sample.png);}

説明
<bg-image>”値
none 背景画像を指定しない
<image> url()”関数を使用した画像ファイルやlinear-gradient()”関数で生成したグラデーションなどで背景画像を指定
他の値
共通キーワード

複数の画像を背景に指定する

値を“,(コンマ)”で区切って並べて記述することで複数の画像を背景に指定することができます。最初に記述した背景が最前面、最後に記述した背景が最背面になるように、重ねて描画されます。

div { background-image: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,...,〚一番奥の背景画像〛;}

仕様書

定義されている仕様書
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
background-image
定義あり

定義あり

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
none
定義あり

定義あり

定義あり
<image>
定義あり

定義あり

定義あり

使用例

背景画像を指定する

div { background-image: url(background_sample.png);}
div { background-image: linear-gradient(rgb(66,174,147), rgb(28,20,15));}

複数の背景画像を指定する

div {
background-repeat: no-repeat, no-repeat;
background-image: url(background_sample.png),url(background_sample2.png);
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク