[CSS] background-image

2020-08-29 [更新]

Background(背景)

CSS のbackground-imageは、要素に背景画像やグラデーションを設定するプロパティ。
何種類もの画像やグラデーションを重ねる事も可能です。

ショートハンド(一括指定) background も利用できます。

background-image Code DEMO

background-image:linear-gradient(45deg, #9c6aff 0%, #56ceff 50%, rgb(108,255,88) 100%);
background-image:url(img/3d-6.jpg);
background-image:url(img/2622-1.png), url(img/3d-6.jpg);
background-image:url(img/2622-1.png), radial-gradient(circle, rgba(255,133,17,0) 50%, rgba(255,133,17,1) 60%, #fdff00 80%, #2dff88 100%), url(img/3d-6.jpg);

他の値を持つ場合があります。詳細は以下をご確認下さい

※グラデーション関係の詳細は [CSS] gradient (グラデーション) をご覧ください

background-image の詳細

利用できる値

none (初期値): none

無指定又は none で背景画像不使用
image: url( 画像パス )

画像の絶対又は相対パス
※相対はcssから画像までのパス
※urlをクオーテーション( ‘ or ” )で囲う必要はない
gradient: linear-gradient repeating-linear-gradient

線形グラデーション
グラデーションタイプ・色・方向等を指定 [CSS] gradient ▶; radial-gradient repeating-radial-gradient

円形グラデーション
グラデーションタイプ・色・方向等を指定 [CSS] gradient ▶; conic-gradient

扇形グラデーション
グラデーションタイプ・色・方向等を指定 [CSS] gradient ▶

background-image の複数指定

画像やグラデーションをカンマ ‘ , ‘ で繋ぐことで、何枚も重ねて指定する事ができます。
左(最初に書かれたもの)が一番上、右に行くほど下になります。

background-image: 
  url(img/2622-1.png), 
  radial-gradient(circle, rgba(255,133,17,0) 50%, rgba(255,133,17,1) 60%, #fdff00 80%, #2dff88 100%), 
  url(img/3d-6.jpg);

background-image 設定時の注意

background-image: url(画像パス); の代わりに、
background: url(画像パス); と、ショートハンドで記載する事もできます。
背景画像のurlを相対指定する場合、cssから画像までのパスを記載します。
(ページからではないので注意!!)
背景画像を設置する際、画像以外に [ background-○○ ] といった指定がある場合は、ショートハンド ( background ) の利用が推奨されています。
background-imageを重ねる場合は、カンマ区切りで繋ぎます。
プロパティ自体( background-image: url(画像パス); )を複数記載した場合「重なり」ではなく最後に書かれたものが適用されます。

ブラウザ対応状況 (2020/07 現在)

〇
〇
〇
〇
〇
〇
〇
〇

こちらは [ url( 画像パス ) ] の対応状況です。
[ ○○-gradient ] の対応状況は、それぞれのページで確認頂けます。

※より詳細な情報、最新情報、他バージョン対応などを確認されたい場合は Can I use 等のチェックサイトでお調べ下さいm(__)m

コメント