CSSの背景サイズとバックグラウンドポジションの使用方法

CSSの背景画像サイズと位置のスキルをマスターして、応答性のあるレイアウトを簡単に作成します！この記事では、背景画像のサイズと位置を柔軟に制御するのに役立つbackground-sizeおよびbackground-positionプロパティを詳細に調べます。

コアポイント：

• background-size属性は、背景画像サイズを調整するために使用され、coverやcontainなどのキーワード、およびピクセル、EM、パーセンテージなどの数値単位をサポートします。
• background-position属性は、コンテナ内の背景画像の位置を制御し、background-size: coverで最適に機能します。
• background-positionキーワード（上、下、左、右、中央）、長さの値（PX、EM）またはパーセンテージ値を使用して、正確な画像位置を実現できます。
• background-sizeとbackground-positionの組み合わせは、コンテナサイズの変更に対処するためのレスポンシブレイアウトに特に適しています。

実践的な演習：

デモには、oia、santorini（400px x 600px）の写真を使用します。

この例では、300px x 200px

が中心になっています。 <div>黄色の背景があり、背景画像は黄色の背景の上にあります。 <code><div> 背景画像を直接追加すると、画像サイズが<p>よりも大きいため、画像の一部のみが表示されます。 <code><div> <p><img src="https://img.php.cn/upload/article/000/000/000/173906287235522.jpg" alt="How to Use CSS background-size and background-position "> </p> <p>属性は、この問題を解決するのに役立ちます。 <code>background-size

を使用して、背景サイズを設定します：background-size

属性には、2つのキーワードbackground-sizeとcover、および数値単位（PX、EM、％）およびcontainが提供されます。 auto

• ：画像は完全に表示されますが、コンテナで満たされていない場合があります。 background-size: contain;

• ：画像にはコンテナがいっぱいですが、一部の画像はトリミングされる場合があります。 background-size: cover;

  

• その他の値：パーセンテージ値またはピクセル値を使用して画像サイズを設定しますが、画像の変形を避けるように注意してください。

を使用して、背景画像の位置を設定します：background-position

デフォルトでは、背景画像の左上隅はコンテナの左上隅にあります。

属性により、画像位置を正確に制御できます。 background-position

• キーワード：top、bottom、left、right、およびその他のキーワードを使用して、キーワードの組み合わせとポジショニングを使用します。 center

• 長さの値：ピクセル、EM、その他の長さの値を使用して、画像位置を微調整します。

• パーセント値：パーセンテージ値を使用して位置に使用します。コンテナに対する比例関係を理解する必要があります。

  

概要：

およびbackground-sizeプロパティは、CSSの強力なツールであり、特にレスポンシブレイアウトを作成するときに役立ちます。これらの2つの属性を柔軟に使用すると、さまざまな背景画像効果を簡単に実現できます。 background-position

詳細については、MDNのドキュメント

およびbackground-sizeを参照してください。 さらに、インライン画像にも適しているbackground-positionおよびobject-fitプロパティを学習することをお勧めします。 object-position

faqs：

ページの右下隅に背景画像を見つける方法は？
• を使用してください。 background-position: bottom right;
背景画像はパーセンテージを使用して配置できますか？ はい、
• はパーセンテージ値を受け入れます。 background-position
背景画像を要素全体をカバーする方法は？
• を使用してください。 background-size: cover;
• とbackground-size: cover;の違いは？ background-size: contain;コンテナを埋め、cover完全なディスプレイをいっぱいにします。 contain
CSSは複数の背景画像をサポートしていますか？ サポートされており、コンマで区切られています。

この記事が、CSSの背景画像サイズと位置プロパティをよりよく理解し、適用するのに役立つことを願っています！