CSS辞典 background-imageプロパティの解説

要素に背景画像を指定する「background-imageプロパティ」の使用方法を記載

対応バージョン：CSS3／2.1

対応ブラウザ
概要・使用方法
- 画像
- サンプルコード

対応ブラウザ

初期値	none
適用される要素	すべての要素
モジュール	CSS Backgrounds and Borders Module Level3
継承	あり

概要・使用方法

{ background-image: 画像;}

「background-imageプロパティ」は、要素の背景に置く画像を指定します。カンマで区切って複数の画像を指定できます。

ただし、その場合は最小に指定した画像が一番上（ユーザに最も近い位置）に配置され、次の画像はそれぞれその後ろに順に配置されます。

background-imageプロパティで指定した画像はページ全体に繰り返し配置されます。

ユーザの環境で背景画像が利用できない場合のために、画像と似た色のbackground-colorプロパティを同時に指定しておくと、同系の背景色と文字色の組み合わせによる読みにくさを防ぐことができます。linear-gradient()関数も指定することができます。

画像

url()	背景画像のURLをurl()関数をで指定します。関数の引数はカンマ（,）で区切って複数指定できます。その場合は先に指定した画像が前面、後に指定した画像が背面に配置されます。
none	背景画像を指定しません。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>background-imageプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .sample1{
                    color:white;
                    background-image:url("https://kcfran.com/sample/4006205_s.jpg");
          }           
    </style>
  </head>
  <body>
      <div class="sample1">
          <h1>星 五芒星</h1>
          <p class="sample2">5つの要素を並列的に図案化できる図形として、洋の東西を問わず使われてきた。
             世界中で魔術の記号とされ、守護に用いることもあれば、サタニズムに見られるように上下を逆向きにして悪魔の象徴とすることもある。
             悪魔の象徴としてとらえる際には、デビルスターと呼ばれることもある。
          </p>
      </div>
  </body>
</html>