CSS を使用した伸縮可能な背景画像

Naila Saad Siddiqui 2023年6月20日

CSS CSS Background

Web ページの CSS スタイリング
CSS background-size プロパティ

この短い記事では、CSS を使用して HTML ページのスタイルを設定する方法について説明し、HTML 要素の背景画像のスタイル設定に焦点を当てています。

Web ページの CSS スタイリング

Web ページで CSS を使用するには、いくつかの方法があります。

インライン CSS: インライン CSS とは、HTML 要素で style 属性を使用し、その要素にスタイルプロパティを適用することを意味します。
内部 CSS: ウェブサイトの単一ページにスタイルを適用する場合は、内部 CSS が使用されます。そのため、そのページのスタイルプロパティを <style> 要素で囲んで記述します。
外部 CSS: 外部 CSS は、すべての Web サイトページにスタイルを適用するために使用される CSS のタイプです。したがって、さまざまなタイプのセレクターとスタイルプロパティを含むスタイルシートを作成し、そのスタイルシートを Web サイトのすべての Web ページに含めます。

さまざまなタイプのスタイルを適用する複数の CSS プロパティがあります。この記事では、任意の要素の背景画像のサイズを設定するために使用されるプロパティ background-size に焦点を当てます。

CSS `background-size` プロパティ

この CSS プロパティは、背景 (画像など) を適用したときに使用され、その要素内の背景画像のサイズまたは位置を設定する必要があります。 background-size を設定するには 4つの方法があります。

キーワードを使用してサイズを設定します。キーワードは、auto、cover、および contain です。
幅のみを指定する 1つの値の構文を使用し、高さは auto に設定します。
幅と高さの値を指定する 2つの値の構文を使用します。
背景サイズに複数の値を使用します。

background-size プロパティの構文。

background-size: auto|contain|cover|initial|inherit|percentage|length

キーワード	意味
`auto`	これは、背景画像が元のサイズで表示されるデフォルト値です。
`contain`	この値では、要素内で完全に見えるように背景画像のサイズが変更されます。
`cover`	この値では、背景画像を引き延ばすかエッジをカットすることにより、要素コンテナーを満たすようにサイズ変更されます。
`initial`	デフォルト値を設定します。
`inherit`	DOM の親要素のサイズを継承します。
`percentage`	パーセンテージ値を使用してサイズを指定します。
`length`	`px`のような単位で値を設定するというものです。一方が指定された場合、他方は `auto` に設定されます。

以下の例では、上で説明した値の一部を使用します。

次の例では、段落を含む div 要素を作成しました。背景画像を div 要素に適用し、さまざまなサイズを設定して、すべての値のデモを取得します。

コード - HTML:

<body>
    <h2>background-size: 72% 52%:</h2>
    <div id="container1">
        <p>This div has a background-size of 72% and 52%.</p>
        <br/><br/>
    </div>
    <h2>background-size: 100% 100%:</h2>
    <div id="container2">
        <p>This div has a background-size of 100% and 100%.</p>
        <br/><br/>
    </div>
</body>

コード - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: 72% 52%;
    background-repeat: no-repeat;
}
#container2 {
    background: url(/img/DelftStack/logo.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

この CSS では、2つの異なる id-selector を作成し、それらに異なるプロパティを適用しました。 container1, では、幅の 72% と高さの 52% をカバーするように背景画像を設定しました。

一方、container2 では、背景画像の幅 100%、高さ 100% を設定しています。

次の例では、background-size の cover 値を使用します。 HTML ページには 1つの div コンテナだけで十分です。

コード - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

コード - HTML:

<body>
    <h2>background-size: 72% 52%:</h2>
    <div id="container1">
        <p>This div has a background-size of 72% and 52%.</p><br/><br/>
    </div>
</body>

背景画像が div 要素全体を覆うように覆われていることがわかります。

次の例では、プロパティ値を contain として使用して、その結果を確認します。

コード - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
}

背景画像は div 要素で完全に表示され、要素全体を覆うように引き伸ばされていないことに注意してください。

したがって、background-size プロパティを設定し、ニーズと要件に応じて画像を伸縮可能または可視にする方法を確認できます。これらのプロパティは、div 要素と同様に、任意の HTML 要素に適用できることに注意してください。

Web ページの CSS スタイリング

CSS background-size プロパティ

関連記事 - CSS Background

CSS `background-size` プロパティ