背景画像のcoverで端が切れる時の対処法！全面表示するための設定ポイント

背景画像を設定する際によく使われる CSS の background-size: cover は、要素全体を美しく覆う表示が可能な反面、画像の一部が切れてしまう問題が発生します。せっかく用意したデザイン要素が意図せず見切れるとユーザー体験やビジュアルの完成度に影響するため、この問題を正しく理解し、用途に応じた解決策を知ることが重要です。この記事では、背景画像 cover 切れる 対処 をキーワードに、切れる原因から具体的な対策まで詳しく解説します。

背景画像 cover 切れる 対処

この見出しでは、背景画像に background-size: cover を指定した際に「切れる」現象がなぜ起きるのかを理解し、どのように対処すれば全面表示に近づけるかを学びます。画面比率や要素の寸法、位置指定などデザインの基本に戻って整理します。

cover 指定の動作原理と切れる箇所

cover は要素の幅と高さの両方を完全に覆うために画像を拡大または縮小します。この際、要素と画像のアスペクト比が一致しないと、幅に合わせて画像を拡げるか、高さに合わせるかによって上下または左右が切れることがあります。たとえば要素が横長で画像が縦長であれば、上下が切れ、逆なら左右が切れるのが普通です。

背景位置（background-position）の調整

切れる箇所を制御するには background-position が重要です。デフォルトでは中心中心（center center）ですが、切れてほしくない被写体が画像の上側にあるなら top center、下側中心なら bottom center を指定して対象を見えるように調整可能です。位置指定を割合やキーワードで細かく設定することでデザインに応じた切り方をコントロールできます。

要素の比率を調整する方法

cover 指定では要素の高さや幅が画像の比に応じて切られるため、要素自体のアスペクト比を画像と近付けることで切れる量を減らせます。方法としては要素に固定比率を持たせる、あるいはメディアクエリで画面サイズによって高さを比率計算で決めるようにするなどが有効です。

cover 以外の設定を検討する

切れることが問題になるなら、代替として background-size: contain の利用や、幅または高さを指定して auto を併用することが検討できます。contain は画像全体を表示できますが要素全面を覆えず横または縦に余白ができる点がトレードオフです。また background-size: 100% auto や auto 100% といった指定で一辺にフィットさせ、もう一辺を自動調整させる方法もあります。

切れを防ぐ具体的な CSS コードパターン

ここでは実際に CSS に書くコード例を示します。背景画像が切れすぎないようなパターンを複数紹介し、それぞれの特徴と使いどころを解説します。どの方法がどのような状況で最適か理解できれば、実装の判断がしやすくなります。

横幅に合わせて高さは自動（100% auto）の利用

用途としては、要素の幅を画面いっぱいに使い、高さは画像の比率に応じて調整したい場合に使います。コード例は次の通りです。

background-size: 100% auto;
background-position: center top;
background-repeat: no-repeat;
height: auto; /* 要素自体の高さを明示するか、アスペクト比 padding を使う */

この指定により、横幅はコンテナにぴったり合う一方で上下が切れにくくなり、画面の幅が狭いときも重要な部分が見えるようになります。

高さに合わせて幅は自動（auto 100%）の利用

画像の縦方向を重視したいシーンでは auto 100% を使います。背景画像を要素の高さに合わせることで、上下は完全に表示されますが左右が切れる可能性があります。スマホ表示など縦比が大きい画面で人物の頭や重要部を切りたくない時に有効な方法です。

メディアクエリで比率を使った可変高さを指定する

要素のアスペクト比を維持するために padding-bottom を使って比率を設定するパターンが使われます。たとえば幅が 100% の要素に対して、画像の比率が 16:9 なら padding-bottom: 56.25% とする方式です。こうすることで要素自体が画像の比率で常に変動し、切れる部分を予測しやすくなります。

object-fit を用いる方法（背景ではなく img 要素の画像を使う場合）

背景画像ではなく <img> 要素で代替表示するなら object-fit: cover; を使うことで同様の挙動を得られます。さらに object-position を使って切れる位置を制御できます。特にレスポンシブデザインで幅と高さを指定できるケースで有効です。

背景画像切れに影響するその他の要因とその対策

背景画像 cover 切れる 対処 を考える際には、CSS コードだけでなく画像そのもの・要素の構造・ブラウザやデバイスの挙動など複数の要因が関係します。ここではそれらの要因を整理し、実際に問題が発生したときのチェックリストを提示します。

画像のアスペクト比とサイズ

画像があまりにも細長だったり、極端な比率を持っていると、cover 指定時に切れる量が大きくなります。必要なら画像自体を切り抜いたり、デザインを調整して重要部が中央にあるように予め構図を整えたりすることが大切です。特にヘッダーやヒーローセクションの画像はこの準備が効果的です。

親要素や html/body の高さの設定

要素が自身の高さを持たず、内容に応じて可変の場合、背景がどこまでの高さに対応すればよいかブラウザが判断できず切れやすくなります。html や body、対象の要素に height: 100%; や min-height: 100vh; を指定して高さ基準を明確にすることが必要です。

背景の繰り返しとフィックス（background-repeat, background-attachment）

background-repeat: no-repeat; は重複表示を防ぎ、予定外の繰返しが切れ感を増やすのを防止します。background-attachment: fixed; を使うとスクロールによるビューポートと要素のずれが原因で切れ方が不自然になるので、要素に応じて fixed を外すのが望ましいケースがあります。

レスポンシブや画面サイズの違いでの挙動

スマートフォン、タブレット、デスクトップでは画面のアスペクト比が大きく異なります。バンドルするとモニターが横長、スマホが縦長で、cover 指定では切れる位置が大きく変わります。メディアクエリでビューポート幅や高さに応じて background-position を変える・必要な比率の画像に差し替えるなどの対応を組むことが一般的です。

背景画像 cover 切れる 対処 の実際のコード例集

ここでは、よくあるシチュエーションに対する CSS の実装例を具体的に示します。自分のサイトに応じて組み替えて使えるよう、要素選びや条件別に例を挙げます。

ヒーローヘッダーで人物の上部を残したい場合

人物の顔など被写体の上部が切れないようにするなら、背景位置を上端寄せ（top center）に設定します。

例：
.hero {
  background-image: url('画像パス');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
 &nbsp height: 60vh; /* またはピクセル高さをレスポンシブ対応 */
}

このようにすると画面が拡大しても被写体の上部が安定して表示されます。

比率固定セクションで全面を表示に近づけたい場合

画像のアスペクト比を考慮してセクション自体を比率で指定する方法です。

例：画像比率 16:9 の場合。
.section {
  width: 100%;
 &nbsp padding-bottom: 56.25%; /* 9 ÷ 16 = 0.5625 */
 &nbsp position: relative;
 &nbsp background-image: url('画像パス');
 &nbsp background-size: cover;
 &nbsp background-position: center center;
 &nbsp background-repeat: no-repeat;
}

この方式でセクションは画面幅に応じて高さが変わり、切れる部分の予測もしやすくなります。

切らずに全体を見せる：contain を利用するケース

画像全体を見せたい重要画像（図表、ロゴ、商品写真など）は contain を使います。ただし余白ができるため、背景色や背景を埋める他要素を設定する必要があります。

例：
.background-full {
  background-image: url('画像パス');
 &nbsp background-size: contain;
 &nbsp background-position: center center;
 &nbsp background-repeat: no-repeat;
 &nbsp background-color: #f0f0f0; /* 画像の背景色など */
 &nbsp height: 400px; /* サイズを適切に指定 */
}

レスポンシブで背景位置を切り替える例

画面幅によって切れる部分を変えるためにメディアクエリを使って background-position を変更します。

例：
.hero { background-position: center top; }
@media (max-width: 768px) {
 &nbsp.hero { background-position: center center; }
}