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

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

CSSのbackground-imageプロパティは、選択した要素の背景に画像を設定するために使用されます。単一の画像だけでなく、複数の画像をカンマで区切って指定することも可能で、グラデーションを背景として利用することもできます。

基本構文

CSSのbackground-imageプロパティの構文は以下の通りです。

セレクタ {
    background-image: /*値*/
}

値には、url()関数で画像のパスを指定するか、linear-gradient()などのグラデーション関数を指定します。

以下の例では、CSSのbackground-imageプロパティの使い方を紹介します。

例1: 要素に背景画像を設定する

<!DOCTYPE html>
<html>
<head>
<style>
#demo {
    margin: 24px;
    box-shadow: 0 0 5px black;
    padding: 20px;
    background-image: url("https://www.tutorialspoint.com/servlets/images/servlets.jpg");
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: cover;
    text-shadow: 0 1px white;
    font-size: 1.4em;
}
p {
    box-shadow: 0 0 5px grey;
}
</style>
</head>
<body>
<h2>Learn Python Blockchain</h2>
<div id="demo">
<p>Servlets are programs that run on a Web or Application server and act as a middle layer between a requests coming from a Web browser or other HTTP client and databases or applications on the HTTP server.
Using Servlets, you can collect input from users through web page forms, present records from a database or another source, and create web pages dynamically.</p>
</div>
</body>
</html>

表示結果

上記のコードを実行すると、以下のように表示されます。

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

この例では、background-origin: content-box;で背景画像の基準位置をコンテンツボックスに設定し、background-repeat: no-repeat;で画像の繰り返しを無効にし、background-size: cover;で領域全体を覆うように画像を拡大縮小しています。

例2: 複数の要素にそれぞれ異なる背景画像を設定する

<!DOCTYPE html>
<html>
<head>
<style>
div {
    height: 150px;
    width: 150px;
    background-image: url("https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg");
    border: 2px solid brown;
}
div > div {
    height: 80px;
    width: 80px;
    margin-right: 50px;
    background-image: url("https://www.tutorialspoint.com/images/hibernate.png");
}
h1 {
    background-image: url("https://www.tutorialspoint.com/hibernate/images/hibernate-patterns.jpg");
    background-repeat: no-repeat;
    color: black;
}
</style>
</head>
<body>
<h1>Demo</h1>
<div>
<div></div>
</div>
</body>
</html>

表示結果

上記のコードを実行すると、以下のように表示されます。

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

この例では、親要素のdivと子要素のdiv、そしてh1要素に対して、それぞれ異なる背景画像を設定しています。子孫セレクタdiv > divを使うことで、入れ子になったdivにのみ別の画像を適用しています。

まとめ

background-imageプロパティを活用することで、Webページの見栄えを大幅に向上させることができます。関連するプロパティとして、背景画像の繰り返しを制御するbackground-repeat、表示サイズを調整するbackground-size、表示位置を指定するbackground-positionなどと組み合わせて使用すると、より柔軟な背景デザインが実現できます。

  1. CSSを使って透明な背景のテキスト付き画像を作成する方法

    CSSで透明な背景テキスト付き画像を作成する方法 Webサイトのバナーやヒーローセクションなどでは、画像の上にテキストを重ねて表示することがよくあります。このとき、テキストに半透明の背景色を加えることで、画像との視認性を保ちながら、洗練されたデザインに仕上げることができます。 以下に、CSSを使って透明な背景テキスト付き画像を作成するコード例を示します。 実装のポイント 画像を包む親要素に position: relative; を指定します。 テキストを含む子要素に position: absolute; と bottom: 0; を指定し、画像の下端に配置します。 背景色は rgba()

  2. CSSイメージスプライトの利点とは？HTTPリクエスト削減でサイト表示を高速化する方法

    Webサイトのパフォーマンス改善テクニックのひとつが「CSSイメージスプライト」です。複数の画像を1枚の画像ファイルにまとめることで、ブラウザがサーバーへ送信するHTTPリクエストの数を大幅に減らせます。リクエスト数が減ればサイトの読み込み時間は短縮され、ページの表示速度向上につながります。さらに、画像があらかじめ読み込まれた状態になるため、マウスオーバーなどのイベントで画像を切り替える際も動作がスムーズになり、画像の読み込み遅延によるちらつきを防ぐことができます。イメージスプライトとは？イメージスプライトとは、複数の小さな画像（アイコンなど）を1枚の大きな画像にまとめたものです。CSSのba