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

CSSのbackground-sizeプロパティとは？背景画像のサイズ指定方法を解説

CSSのbackground-sizeプロパティは、要素に設定した背景画像のサイズを指定するために使用されます。デフォルトでは背景画像は本来のサイズで表示されますが、このプロパティを使うことで、幅や高さを自由に調整したり、要素全体に画像を拡大表示したりすることが可能になります。

主な値とその意味

background-sizeプロパティには、以下のような値を指定できます。

  • auto：画像の本来のサイズで表示します（初期値）。
  • 長さ（px、emなど）：幅と高さを具体的な数値で指定します。例：200px 100px
  • パーセンテージ（%）：親要素に対する割合でサイズを指定します。例：50% auto
  • 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>

コードのポイント解説

上記のサンプルでは、#demoセレクタに対して緑色の破線ボーダーとパディングを設定し、background-imageでロゴ画像を読み込んでいます。background-size: 200px 100px;により、読み込んだ画像が横200px・縦100pxのサイズで繰り返し表示されるようになります。

なお、サイズを1つだけ指定した場合は、それが幅として解釈され、高さは自動的にautoとなり元画像の比率が維持されます。また、複数の背景画像を使用する場合は、カンマ区切りでそれぞれのサイズを指定することもできます。

まとめ

background-sizeプロパティを活用すれば、レスポンシブデザインにおいても背景画像を柔軟に制御できます。特にcoverやcontainは、画面サイズに応じて背景画像をきれいに表示させたい場合に非常に便利なので、ぜひ使いこなしてみてください。

  1. CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説

    CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>

  2. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し