JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSで要素の背景画像を設定する方法【background-imageプロパティ】

CSSで要素に背景画像を設定するには、background-imageプロパティを使用します。このプロパティは、ページ全体（body要素）だけでなく、divやsectionなど任意の要素に対しても適用できます。

基本構文

background-imageプロパティには、画像のパスをurl()関数で指定します。

selector {
  background-image: url("画像のパス");
}

使用例

以下のコードでは、ページ全体の背景に画像を設定しています。<style>タグ内でbody要素に対してbackground-imageを指定することで、ブラウザ全体に背景画像が表示されます。

<html>
  <head>
    <style>
      body {
        background-image: url("/css/images/css.jpg");
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

関連プロパティで表示を調整する

背景画像は、以下のプロパティと組み合わせることで、より細かく表示をコントロールできます。

  • background-repeat：画像の繰り返し方法を指定します（例：no-repeatで繰り返しなし）。
  • background-size：画像のサイズを調整します（例：coverで領域全体を覆う）。
  • background-position：画像の表示位置を指定します。
  • background-attachment：スクロール時の挙動を固定（fixed）または連動（scroll）に設定します。

これらをまとめて指定したい場合は、短縮形のbackgroundプロパティを使うと、1行ですっきりと記述できます。

  1. CSSのlinear-gradient()関数で背景に線形グラデーションを設定する方法

    CSSでは、linear-gradient()関数を使うことで、背景画像として線形グラデーションを簡単に設定できます。この関数はbackgroundプロパティやbackground-imageプロパティの値として指定し、複数の色をカンマで区切って渡すことで、それらが滑らかにつながったグラデーションが生成されます。 linear-gradient()関数の基本構文 background: linear-gradient(色1, 色2, 色3, ...); 色は2つ以上指定でき、上から下へ順番に表示されます。グラデーションの方向（角度）を指定することも可能です。例えばlinear-gradient

  2. CSSで背景に放射状グラデーション（radial-gradient）を設定する方法

    CSSのradial-gradient()関数を使用すると、中心点から外側に向かって色が変化する放射状グラデーションを、背景画像として簡単に設定できます。複数の色を指定するだけで、滑らかなグラデーションが自動的に生成されるため、ボタンやバナー、セクション背景などのデザインに幅広く活用できます。radial-gradient()の基本構文background: radial-gradient(色1, 色2, 色3, ...);色はカンマ区切りで複数指定でき、左側に記述した色が中心になり、右側の色が外周へと変化していきます。実装例次のコードでは、緑（green）・オレンジ（orange）・栗色（m