Background(背景)

[CSS] background-image

この記事は最終更新から2年以上経過しており、内容が古い可能性があります

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

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

同じテーマの記事
このページの目次
  1. background-image の詳細
    1. 利用できる値
      1. background-image の複数指定
      2. background-image 設定時の注意
    2. ブラウザ対応状況 (2020/07 現在)

background-image Code DEMO

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

※グラデーション関係の詳細は [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

同じテーマの記事