CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのbackground-sizeプロパティで背景画像のサイズを指定する方法

CSSのbackground-sizeプロパティは、背景画像の表示サイズを指定するために使用します。ピクセル(px)やパーセンテージ(%)などの具体的な値だけでなく、coverやcontainといったキーワードによる柔軟な指定にも対応しています。

サンプルコード

次のコードでは、background-sizeプロパティを使って背景画像のサイズを「幅200px・高さ100px」に指定しています。実際に実行して、表示結果を確認してみましょう。

<html>
   <head>

      <style>
         #demo {
            border: 5px dashed green;
            padding: 10px;
            background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
            background-size: 200px 100px;
         }
      </style>

   </head>
   <body>

      <div id="demo">
         <h1>www.tutorialspoint.com</h1>
         <p>The website www.tutorialspoint.com is owned and maintained by Tutorials Point India Private Limited,
            henceforth termed as “we”, “our”, “us”, or the “company”. All the visitors, users, learners, contributors,
            teachers, and instructors are named as "users"; and the website tutorialspoint.com is termed as "website" everywhere in this document.
            We are committed to protecting your privacy online. This privacy policy explains what information we collect from you
            or what information you share with us when you visit the website. We review our policy from time to time, so you are advised to check the latest version.</p>
      </div>
   </body>
</html>

background-sizeプロパティの主な指定値

  • auto — 画像の本来のサイズで表示します(初期値)。
  • 長さ(px / em など) — 幅と高さを数値で指定します。値を1つだけ指定した場合、高さは自動的に「auto」となり、画像の縦横比が維持されます。
  • パーセンテージ(%) — 背景を適用する要素の大きさに対する割合で指定します。
  • cover — 要素全体を覆い尽くすように画像を拡大・縮小します。縦横比は保たれますが、はみ出した部分は切り取られます。
  • contain — 画像全体が収まるように拡大・縮小します。縦横比は保たれますが、余白が生じる場合があります。

補足ポイント

レスポンシブデザインでは、background-size: cover; を background-position: center; と組み合わせて使うことで、画面サイズが変わっても背景画像が美しく表示され、よく使われるテクニックです。

  1. CSSで背景に放射状グラデーション（radial-gradient）を設定する方法

    CSSのradial-gradient()関数を使用すると、中心点から外側に向かって色が変化する放射状グラデーションを、背景画像として簡単に設定できます。複数の色を指定するだけで、滑らかなグラデーションが自動的に生成されるため、ボタンやバナー、セクション背景などのデザインに幅広く活用できます。radial-gradient()の基本構文background: radial-gradient(色1, 色2, 色3, ...);色はカンマ区切りで複数指定でき、左側に記述した色が中心になり、右側の色が外周へと変化していきます。実装例次のコードでは、緑（green）・オレンジ（orange）・栗色（m

  2. CSSを使ってスクロール時に背景画像を切り替える方法【サンプルコード付き】

    CSSを使用すれば、JavaScriptに頼らなくても、ページをスクロールした際に背景画像を切り替える演出を実現できます。仕組みはシンプルで、複数のセクション（div要素）ごとに異なる背景画像を設定し、テキストをposition: fixedで画面に固定表示するだけです。スクロールに合わせて背景が次々と変化していき、パララックス風の印象的なデザインになります。 実装のポイント 各div要素に対してbackground-imageで異なる画像URLを指定します。 background-size: cover; と background-position: center; を組み合わせることで、