CSS を使用してウィンドウに合わせて背景画像をスケーリングする

この記事では、CSS を使用して背景画像をスケーリングおよびストレッチする方法を説明します。 場合によっては、画面のビューポートまたはウィンドウ サイズに合わせて背景画像をスケーリングする必要があります。この記事ではそれを行います。

CSS background-size プロパティを使用して、背景画像をウィンドウに合わせてスケーリングする

プログラマーは、background-size CSS プロパティを使用して、背景画像のサイズを管理できます。 cover を CSS background-size プロパティの値として使用すると、ユーザーのウィンドウ サイズに合わせて背景画像を引き伸ばすことができます。

たとえば、<h1> 要素を作成し、そこに表示するテキストを追加しました。 また、CSS background プロパティを使用して背景画像を全身に設定しています。

background プロパティに 4つの異なる値を渡しました。 最初の値は、背景画像の URL を表します。

no-repeat は、背景画像を繰り返してはならず、画面に 1 回だけ表示する必要があることを示します。 center 値は、背景画像が画面の中央にあることを表し、fixed は背景画像のサイズが固定され、スクロールが許可されないことを表します。

また、CSS で background-size: cover プロパティを使用しました。これにより、body 要素のサイズに従って画像をスケーリングできます。

HTML コード:

<h1 class="text">This is the demo text.</h1>

CSS コード:

body {
  background: url(https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg) no-repeat center fixed;
  background-size: cover;
}

出力：

上記の出力画像では、ユーザーは画像が引き伸ばされていることがわかり、1つの画像が Web ページの背景として機能しています。

下の例に示すように、CSS background-size プロパティの値として 100% を使用して、ユーザーの画面のビューポートに応じて背景画像を合わせることができます。

CSS コード:

body {
  background: url(https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg) no-repeat center fixed;
  background-size: 100%;
}

<h1 class="text">This is the demo text.</h1>

出力：

この記事では、CSS のみを使用して背景画像をスケーリングする 2つの異なる方法を学習しました。 ユーザーは快適さに応じて任意の方法を選択できます。