background-sizeとは？初心者にも分かるCSSの使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

background-sizeとは？初心者にも分かる使い方ガイド

ウェブページの背景には画像が使われることが多いですが、ただ画像を置くだけではデザインの自由度が十分に活かせません。そんな時に役立つのが CSS の背景サイズを調整するプロパティ background-size です。

background-size は「背景画像が要素のどの部分を、どのくらいの大きさで表示するか」を決める指示です。ここでは基本の使い方を、初めてでも分かるように分解していきます。

background-size の基本的な値

まず覚えておきたいのは代表的な値です。auto は元の画像の大きさを基本のまま使い、cover は要素を覆うように背景を引き伸ばしますが、画像の一部が見切れることがあります。contain は背景全体が要素内に収まるように大きさを調整しますが、縦横の比率は維持され、余白ができる場合があります。

また、長さや割合を直接指定することもできます。例として、背景を幅 300px、高さ 200px に固定するには background-size: 300px 200px; のように書きます。割合を使えば、要素の大きさに応じて自動的に大きさが変わります。例：background-size: 50% 50%; のように指定します。

実践での使い方

レスポンシブデザインでは背景画像を画面サイズに合わせて自然に表示させたい場面が多いです。cover を使うと、どのデバイスでも背景がページを覆うように見えやすくなります。逆に、全体が見えることを重視する時は contain を選ぶと良いでしょう。実務では画像の内容と空白のバランスを見ながら使い分けます。

値の比較表

値	意味
auto	元のサイズを維持。比率を崩さない範囲で表示。
cover	要素を覆うように拡大/縮小。表示領域を満たすが一部が切れることがある。
contain	背景全体を要素内に収める。余白ができる場合がある。
長さ / 比率	例: 300px 200px や 50% 50% など、自由に組み合わせ可能。

実践のコツとしては、まず 実際のページの見た目を確認 し、切り抜きが気になる場合は contain、背景が画面を覆う感を出したい場合は cover を選ぶといった判断をすることです。さらに、背景画像と他の要素の色や明るさのバランスにも注意しましょう。背景画像の露出や鮮やかさを調整したい時は、background-size だけでなく、background-position や background-repeat の設定も併用すると効果的です。

最後に、よくある誤解を一つだけ。background-size が指定されていなくても背景は表示されますが、デザインの意図が崩れることがあります。必ず適切な値を設定して、見た目と使い勝手の両方を確認しましょう。

background-sizeの関連サジェスト解説

background size cover とは: この記事では、ウェブページの背景を設定する時に聞く「background-size: cover」について、中学生にも分かる言葉で説明します。結論から言うと、background-size: cover は背景画像を要素の枠いっぱいになるように大きくしたり小さくしたりして、縦横の長さをできるだけ保ちながら表示します。だから枠の外にはみ出す部分がでてくることがあります。これを「切り抜き」と呼ぶこともあります。一方、同じくよく使われる背景サイズの値に contain があります。contain は画像全体を見せるため、要素をいっぱいには埋まりませんが、空白ができにくくなります。使い方はとても簡単で、CSS の中に background-image: url('画像のURL'); background-size: cover; と書くだけです。場合によっては写真（関連記事：写真ACを三ヵ月やったリアルな感想【写真を投稿するだけで簡単副収入】）のどの部分を見せたいかを決めるために background-position: center; を足すと、中央を中心に切り抜かれやすくなります。背景に写真を使うデザインでは、画像の選び方や文字とのコントラストも大事です。結局、background-size: cover は画面サイズが変わっても背景が枠を覆うのに役立つ便利な設定ですが、重要な情報が切れてしまうこともあるので、配置をよく考えることがポイントです。
background-size contain とは: 背景を装飾する時に使う CSS プロパティの一つに background-size があります。中でも初心者がつまずきやすいのが背景の見え方を決める contain と cover の違いです。背景サイズ contain とは、背景画像の縦横比を崩さず、要素の枠内に全体が収まるように画像を拡大・縮小する設定です。要は、画像が見える範囲を広げつつ、要素の外にはみ出さないようにします。縦横比が合わない場合には、上下左右に余白が生まれることがあります。例えば幅300px高さ200pxの容器にアスペクト比1:1の画像を入れると、横か縦に空白ができます。その空白は背景色や背景画像の指定で埋めることができます。使い方としては、CSS に「background-size: contain;」と書き、見た目を決めたい要素には「background-position: center;」と「background-repeat: no-repeat;」を併用すると綺麗に整います。実務ではロゴやパターン、写真を背景に使う場面でよく役立ちます。理解を深めるためには、実際に自分のサイトの要素に適用して、サイズと余白がどう変わるかを観察してみると良いでしょう。

background-sizeの同意語

背景サイズ: 背景画像の表示サイズを指定する CSS プロパティ background-size のこと。値には auto、cover、contain、長さ、％などを使える。
背景のサイズ: 背景画像の幅と高さを決める設定。背景画像の表示サイズを整える意味で使われる表現。
背景画像のサイズ: 背景画像の表示サイズを決定するという意味の表現。実質的には background-size の別名として使われることがある。
背景の大きさ: 背景画像の表示領域の大きさを示す言い回し。背景サイズ設定の同義語として使われることがある。
背景表示サイズ: 背景画像が画面に表示されるときのサイズを指す表現。
背景画像表示サイズ: 背景画像の表示サイズを指す言い換え。background-size の意味と同じ。
背景の寸法: 背景画像の縦横の寸法を指す表現。背景サイズ設定の同義語として使われることがある。
背景画像の寸法: 背景画像自体の縦横の長さを表す表現。背景サイズの文脈で使われることがある。
背景サイズ指定: 背景画像のサイズを指定する行為を指す表現。background-size の操作を意味する言い方。

background-sizeの対義語・反対語

cover: 背景を表示領域全体を覆うように拡大して表示する設定。元の縦横比を保つことが多く、領域の端まで背景画像が見える場合がありますが、領域からはみ出すこともあります。
contain: 背景画像を領域内に収まるように拡大/縮小して表示する設定。縦横比を維持するため、領域の一部が表示されない余白ができることがあります。
auto: 背景画像のサイズを自動的に決定するデフォルトの動作。通常は元の画像サイズを基準に表示され、手動でサイズを指定しません。
固定サイズ: 背景画像のサイズを具体的な長さ（例: 200px など）またはパーセントで明示的に指定する設定。自動調整を避け、領域を必ず覆すとは限らず、切り抜きや余白が生じることがあります。

background-sizeの共起語

背景画像: 背景として設定する画像。background-image で指定します。
背景位置: 背景画像の表示位置を決める。例: background-position: center; left top など。
背景繰り返し: 背景画像を横方向・縦方向に繰り返すかどうかを設定します（repeat / no-repeat / repeat-x / repeat-y）。
背景固定: 背景がスクロールに追従するか、固定されるかを設定します（background-attachment: scroll | fixed）。
背景色: 背景の下地色。背景画像が無い部分の色を指定します（background-color）。
背景ショートハンド: 背景関連の複数プロパティを1つの宣言にまとめて書く書き方です（例: background: url(...) center/cover no-repeat #fff;）。
カバー: 値 cover は背景画像を背景領域全体を覆うように拡大縮小します。
コンテイン: 値 contain は背景全体が表示されるようにサイズを調整します。
自動: 値 auto はサイズを自動的に決定します。
単位: 背景サイズの値に使われる単位。px、%、vw、vh などがあります。
パーセントとピクセル: % や px は背景サイズを指定する際によく使われる表現です。
複数背景: background-image などをカンマで区切って複数の背景を同時に設定できます。
ベンダープレフィックス: 古いブラウザ向けに前置き（-webkit- など）が必要だったことがありますが、現代は不要な場合が多いです。
メディアクエリ: 画面条件に応じて CSS を切り替える方法。背景サイズもこの中で変えることができます。
レスポンシブデザイン: 画面サイズに合わせて背景の表示を調整します。
ブラウザ互換性: 主要ブラウザ間の差異やサポート状況を確認して使い分けます。
CSS3: 背景サイズは CSS3 で導入された機能で、現在は広くサポートされています。
MDN: 背景サイズの公式ドキュメント。使い方や例が詳しく載っています。
画像URL: background-image に指定する画像ファイルの URL。

background-sizeの関連用語

background-size: 背景画像の表示サイズを設定するCSSプロパティ。値には auto、長さ、パーセント、contain、cover が使えます。
contain: 背景を要素の背景領域に収まるようサイズを調整するキーワード。幅または高さが領域内に収まるよう最大化します。
cover: 背景を要素全体を覆うように拡大・縮小するキーワード。余白を作らずに領域を埋めます。
auto: 自動サイズ。幅と高さはブラウザが自動で計算します。
length: 背景サイズを長さで指定する場合の表現。px、em、rem、vw/vh などの単位を用います。
percentage: 背景サイズを要素の幅・高さに対する割合（%）で指定する表現。例: 50% 50%。
inherit: 親要素の background-size を継承して適用します。
initial: 背景サイズの初期値。通常は auto auto（幅も高さも自動）。
one-value syntax: 1つの値だけ指定する構文。幅にその値を適用し、高さは自動（auto）になります。例: background-size: 200px;
two-value syntax: 2つの値をスペースで並べて幅と高さを個別に指定する構文。例: background-size: 100px 50px;
slash notation: 背景ショートハンドで位置とサイズを「位置 / サイズ」の形で書く書き方。例: background: url(image.jpg) center / 80% auto no-repeat;
background-position: 背景画像の表示開始位置を決めるプロパティ。キーワード（left, right, center, top, bottom）や長さ・パーセントで指定します。
background-image: 背景として適用する画像のURLまたはグラデーションを指定します。
background-repeat: 背景画像の繰り返し設定。 values: repeat、no-repeat、repeat-x、repeat-y。
background-origin: 背景の原点となるボックスを決める。 values: border-box, padding-box, content-box。
background-clip: 背景が塗りつぶされる領域を決める。 values: border-box, padding-box, content-box。
background-attachment: 背景のスクロール挙動を決める。 values: scroll、fixed、local。
background: 背景関連の複数プロパティを1つのショートハンドでまとめて指定します（背景-image、 background-position、 background-size、 background-repeat などを同時設定可能）。
object-fit: 置換要素（画像・動画など）のボックス内への収まり方を指定するプロパティ。値には contain、 cover、 fill、 none、 scale-down などがある。