css background-image

CSS background-image プロパティ详解

説明: background-image プロパティは、要素の背景画像を設定するために使用されます。

1. 単一の背景画像を設定する

  • 構文: 
    
    background-image: url("画像URL");
  • 例: 
    
    body {
      background-image: url("bg.jpg");
    }
  • 説明:
    • 画像URLは、相対パスまたは絶対パスで指定できます。
    • 画像を読み込めない場合は、背景画像は表示されません。

2. 複数の背景画像を設定する

  • 構文: 
    
    background-image: url("画像1のURL"), url("画像2のURL"), ...;
  • 例: 
    
    body {
      background-image: url("bg1.jpg"), url("bg2.png");
    }
  • 説明:
    • 複数の背景画像はカンマで区切ります。
    • 画像は指定した順に重ねて表示され、最後に指定した画像が一番上に表示されます。

3. 線形グラデーションを背景として使用する

  • 構文: 
    
    background-image: linear-gradient(方向, 色1, 色2, ...);
  • 例: 
    
    body {
      background-image: linear-gradient(to right, red, yellow);
    }
  • 説明:
    • linear-gradient() 関数は、線形グラデーションを作成するために使用されます。
    • 方向は、角度、キーワード、またはキーワードの組み合わせで指定できます。
    • 色は、色名、16進数のカラーコード、またはRGBカラー値で指定できます。

4. 放射状グラデーションを背景として使用する

  • 構文: 
    
    background-image: radial-gradient(形状 サイズ 位置, 色1, 色2, ...);
  • 例: 
    
    body {
      background-image: radial-gradient(circle at center, red, yellow);
    }
  • 説明:
    • radial-gradient() 関数は、放射状グラデーションを作成するために使用されます。
    • 形状は、circle または ellipse を指定できます。
    • サイズは、具体的な長さ、パーセンテージ、またはキーワードで指定できます。
    • 位置は、キーワードまたは具体的な座標値で指定できます。

5. 他の背景プロパティと組み合わせて使用する

  • background-image プロパティは、他の背景プロパティ（background-repeat、background-position、background-size など）と組み合わせて使用することで、より複雑な背景効果を作成できます。

    • 5.1 background-repeat との組み合わせ

    background-repeat プロパティは、背景画像の繰り返し方法を指定します。repeat, repeat-x, repeat-y, no-repeat から選択できます。 

    
  body {
    background-image: url("bg.jpg");
    background-repeat: repeat-x;
  }

    5.2 background-position との組み合わせ

    background-position プロパティは、背景画像の位置を指定します。キーワード (e.g., top, center, bottom)、パーセンテージ、具体的な長さを使用できます。 

    
  body {
    background-image: url("bg.jpg");
    background-position: top center;
  }

    5.3 background-size との組み合わせ

    background-size プロパティは、背景画像のサイズを指定します。キーワード (e.g., cover, contain)、パーセンテージ、具体的な長さを使用できます。 

    
  body {
    background-image: url("bg.jpg");
    background-size: cover;
  }

参考資料

Q&A

Q1: 複数の背景画像を設定した場合、どのように重ねて表示されますか？

A1: 複数の背景画像は、指定した順に重ねて表示されます。最後に指定した画像が一番上に表示されます。

Q2: 背景画像をレスポンシブに対応させるにはどうすればよいですか？

A2: 背景画像をレスポンシブに対応させるには、background-size プロパティに cover または contain を指定します。

Q3: 背景画像が読み込めない場合の代替手段はありますか？

A3: 背景画像が読み込めない場合の代替手段として、background-color プロパティで背景色を指定しておくことができます。

その他の参考記事:CSS 背景プロパティ