CSSで背景画像を伸縮する方法

1. 背景画像を伸縮する方法 背景画像を伸縮するには、CSSのbackground-sizeプロパティを使用します。このプロパティには、次の値を指定することができます。

• contain: 要素の範囲内に画像が収まるように伸縮します。画像のアスペクト比は保持されますが、要素の一方の辺に合わせて画像が拡大または縮小されます。
• cover: 要素全体を覆うように画像を伸縮します。画像のアスペクト比は保持されますが、要素の一方の辺が完全に埋まるように画像が拡大される場合があります。
• 100% 100%: 要素の幅と高さに合わせて画像を伸縮します。画像のアスペクト比は保持されません。

以下に、background-sizeプロパティを使用して背景画像を伸縮する例を示します。

.background-image {
  background-image: url('画像のURL');
  background-size: contain;
}

2. 背景画像の位置を調整する方法 背景画像の位置を調整するには、background-positionプロパティを使用します。このプロパティには、水平方向と垂直方向の位置を指定する値を設定します。値はキーワード（left、center、right、top、center、bottom）またはピクセル値で指定できます。

以下に、background-positionプロパティを使用して背景画像の位置を調整する例を示します。

.background-image {
  background-image: url('画像のURL');
  background-size: contain;
  background-position: center center;
}

これらの方法を使用すると、CSSで背景画像を伸縮および位置調整することができます。必要に応じて、他のCSSプロパティやセレクタと組み合わせて利用することもできます。