【CSS Modules】background-imageプロパティの使い方

background-imageプロパティは、要素の背景に一つまたは複数の画像を適用するために使用されるプロパティです。CSS Modulesの一部として提供されており、Webページの視覚的な表現を豊かにするために不可欠な要素となります。このプロパティを使用することで、Webサイトにロゴ、装飾的なパターン、写真、またはデザイン性の高いグラデーションなどを背景として容易に組み込むことが可能です。

値としては主にurl()関数を使用し、表示したい画像ファイルのパスを指定します。例えば、url('images/background.png')のように記述します。背景画像を適用しない場合はnoneを指定します。また、画像ファイルだけでなく、linear-gradient()やradial-gradient()といったCSSのグラデーション関数も値として設定できるため、多様なデザインに対応できます。

複数の背景画像を重ねて表示することも可能で、この場合はカンマ区切りで複数の画像を列挙します。最初に指定された画像が最も手前（上）に表示され、以降の画像がその下に重なって表示される仕組みです。

background-image単独で使うだけでなく、background-repeatプロパティで画像の繰り返し方法を制御したり、background-positionプロパティで画像の配置を指定したり、background-sizeプロパティで画像の表示サイズを調整したりすることで、より詳細な背景デザインを実現できます。これらの関連プロパティは、backgroundというショートハンドプロパティを使ってまとめて指定することも可能です。

Webサイトのユーザー体験向上に貢献する一方で、過度な使用や不適切な画像サイズ、フォーマットの選択はページの読み込み速度に影響を与える可能性があるため、パフォーマンスを考慮した適切な利用が求められます。また、背景画像の上に表示されるテキストの可読性にも配慮し、コントラストを適切に保つことが重要です。

Copy
1background-image: url("images/background.png");

引数なし

引数はありません

戻り値なし

戻り値はありません