CSS での背景画像の中央配置

1. CSS で背景プロパティを使用して背景画像を中央に配置する
2. CSS で width、height、left、および top プロパティを使用して背景画像を中央に配置する

このチュートリアルでは、CSS で背景画像を中央に配置するいくつかの方法を示します。

CSS で背景プロパティを使用して背景画像を中央に配置する

さまざまな背景プロパティを使用して、CSS で背景画像を中央に配置できます。

background-image、background-repeat、background-attachment、background-position、background-size などのプロパティを使用して、背景画像を中央に配置します。background 省略形プロパティを使用して、これらのさまざまなプロパティを定義することもできます。

background-image プロパティは、url() 関数を使用して画像を設定します。background-repeat プロパティを使用して、画像の繰り返し動作を定義します。

background-attachment プロパティは、背景の固定またはスクロール動作を定義します。background-position プロパティを使用して、背景の開始位置を設定できます。

最後に、background-size プロパティを使用して画像のサイズを設定できます。

たとえば、CSS で html タグを選択し、スタイルを適用します。

まず、background-image プロパティを使用して背景画像を設定します。次に、background-repeat プロパティを no-repeat に設定します。

次に、background-attachment プロパティの fixed オプションを記述します。その後、background-position プロパティを center center オプションに適用し、background-size プロパティを cover に適用します。

次の例では、no-repeat オプションを使用すると、画像が繰り返されなくなります。背景画像のサイズが小さい場合、画像は行と列として複製されます。

background-attachment プロパティに fixed オプションを使用したため、ページをスクロールしても背景画像は固定されたままになります。background-position プロパティのオプション center center は、画像を水平方向と垂直方向の中央に配置します。

最後に、cover オプションは、html コンテナ全体をカバーするように画像のサイズを変更します。したがって、CSS のさまざまな背景プロパティを使用して背景画像を中央に配置できます。

サンプルコード：

html{
    background-image: url("/img/DelftStack/logo.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

CSS で width、height、left、および top プロパティを使用して背景画像を中央に配置する

この方法では、width、height、left、top などのプロパティを使用して、CSS で背景画像を中央に配置する別の方法について説明します。高さと幅を 100%に設定して、画像が body タグの高さと幅全体を占めるようにすることができます。

body 要素は img 要素の親です。top および left プロパティを使用して、背景画像から画像の上部および左側の要素までの距離を設定できます。

これらの 2つのプロパティは、要素の position プロパティが設定されている場合にのみ機能することに注意してください。

たとえば、img タグを選択し、width および height プロパティを 100%に設定します。次に、position プロパティを fixed に設定します。次に、left および right プロパティを 0 に設定します。

left および right プロパティで 0 値を使用して、隣接する要素を含む画像の上端と左端にスペースを残しませんでした。その結果、画像はブラウザのビューポートに収まります。

このようにして、これらのさまざまなプロパティを使用して、CSS の背景画像を中央に配置できます。

サンプルコード：

img {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}

<div>
    <img src="/img/DelftStack/logo.png">
</div>