CSSだけでレスポンシブ対応背景画像の使い方とテクニック

背景画像の挿入

背景に画像はCSSで画像を読み込み表示します。

CSSプロパティの「background-image」プロパティを使って、背景画像を指定して表示します。

1. 画像の読み込み
   Web練習フォルダ/

   ├index.html
   └css/

   └main.css

   └image/

   └paris.jpg

   CSSのURL関数を使って、画像があるところまでのファイルパスを指定します。

   今回はCSSファイルの「main.css」からの相対パスを指定して画像を読み込みます。

   .back {

   background-image: url('../image/paris.jpg');

   }
2. 画像の大きさ

   背景画像は画像を読み込むだけでは表示されません。

   背景画像は表示する画像の大きさをはっきりと指定する必要があります。

   今回は画像の横幅を「100%」高さを「400px」に指定します。

   .back {

   width: 100%;
   height: 400px;
   background-image: url('../image/paris.jpg');

   }

背景画像の表示位置

背景画像の表示位置を調整します。

背景画像が要素の中心に来るようにします。

CSSプロパティ「background-position」の値を「center」に指定します。

.back {

background-position: center;

}

背景画像のサイズ

背景画像のサイズを調整します。

背景画像の大きさは主に3つのパターンで調節が可能です。

固定値

背景画像の大きさを固定値で設定することが出来ます。

例えば、背景画像の横幅を「200px」高さを「100px」に固定する場合はこのようにCSSで指定します。

固定値で大きさを指定する際は、横幅・高さの順番で記述しましょう。

.back {

background-size: 200px 100px;

}

contain

背景画像の画像全体がすべて見えるように、画像を拡大または縮小します。

表示する画像によっては、画像の上下もしくは左右に余白が作られたように見えます。

CSSプロパティ「background-size」の値を「contain」に指定します。

cover

背景画像が要素全体にピッタリ収まるように拡大または縮小します。

表示する画像によっては、拡大されてはみ出た部分が切り取られたように見えます。

CSSプロパティ「background-size」の値を「cover」に指定します。

.back {

background-size: cover;

}

背景画像の繰り返し

背景画像は、表示する画像の大きさによっては、要素全体を埋めるように繰り返し並べて表示されます。

これは画像の大きさが不足している場合は、CSSが自動で繰り返し表示をして要素全体を埋めようとするためです。

CSSで画像の繰り返しを適切に制御しましょう。

画像の繰り返し (デフォルト)

CSSで背景画像の繰り返しを指定しない場合は、要素全体を埋めるように画像を上下左右に繰り返します。

もしくは、CSSプロパティ「background-repeat」の値を「repeat」にすることで、繰り返すを許可することが可能です。

.back {

background-repeat: repeat;

}

画像の繰り返し禁止

画像を繰り返し表示しない時は「background-repeat」プロパティの値を「no-repeat」に指定します。

CSSプロパティ「background-repeat」の値を「no-repeat」にすることで、画像の繰り返しを禁止します。

.back {

background-repeat: no-repeat;

}

背景画像をまとめて設定

CSSで背景画像を挿入する時に、綺麗に表示するようにまとめて設定します。

CSSプロパティ「background」の値に「ファイルパス」「ポジション」「サイズ」「リピート」の順番でまとめて指定します。

1. ファイルパスの指定
   Web練習フォルダ/

   ├index.html
   └css/

   └main.css

   └image/

   └paris.jpg

   CSSのURL関数を使って、画像があるところまでのファイルパスを指定します。

   今回はCSSファイルの「main.css」からの相対パスを指定して画像を読み込みます。

   .back {

   background: url('../image/paris.jpg');

   }
2. ポジションの指定

   背景画像が要素の中心に来るようにします。

   URL関数の後ろに「center」を指定します。

   CSSプロパティ「background-position」の値を「center」にしています。

   .back {

   background: url('../image/paris.jpg') center;

   }
3. サイズの指定

   背景画像が要素全体にピッタリ収まるように、拡大または縮小するようにします。

   先ほど指定したポジションの「center」の後ろに「cover」を指定します。

   その時に、「center / cover」のように「/」を間に挟んで指定します。

   CSSプロパティ「background-size」の値を「cover」にしています。

   .back {

   background: url('../image/paris.jpg') center / cover;

   }
4. リピートの指定

   画像を繰り返さないように設定します。

   先ほど指定したサイズの「cover」の後ろに「no-repeat」を指定します。

   CSSプロパティ「background-repeat」の値を「no-repeat」にしています。

   .back {

   background: url('../image/paris.jpg') center / cover no-repeat;

   }

背景画像を表示する際は、高さを固定値で指定する必要があります。

背景画像の高さを画像の縮尺に合わせて変えたい場合に、CSSの「height: auto」にしても意図した通りに表示されません。

この場合の背景画像の高さは、高さの基準になるものがないため高さは「0px」になります。

背景画像の高さは固定値

背景画像はあくまでも背景なので、画像自体に大きさはありません。

背景画像の横幅は「100%」で画面サイズなどに合わせることは可能です。

ただし、背景画像の高さを「auto」や「100%」にする事は出来ず、高さは「0px」になります。

そのため、背景画像の高さは固定値で指定しないと表示されません。

.back {

width: 100%;
height: 400px;
background: url('../image/paris.jpg') center / cover no-repeat;

}

レスポンシブ対応が難しい

背景画像の高さが固定すると、スマホなどの小さな画面では大きすぎたり小さすぎることがあります。

背景画像の大きさを調節する方法として、CSSのメディアクエリを使った方法があります。

例えば下のコードのように、端末の大きさごとに背景画像の高さを調節します。

/* パソコン */
.back {

width: 100%;
height: 400px;
background: url('../image/paris.jpg') center / cover no-repeat;

}
/* タブレット */
@media (max-width: 768px) {

.back {

height: 300px;

}

}
/* スマホ */
@media (max-width: 425px) {

.back {

height: 200px;

}

}

レスポンシブ対応のやり方

背景画像の高さは固定値である必要があるため、高さは指定しません。

その代わりにCSSの「padding」の余白を使って背景画像の高さを作ります。

1. 背景画像の横幅を広げる

   背景画像をCSSで読み込み、要素の横幅を最大まで広げます。

   .back {

   width: 100%;
   background: url('../image/paris.jpg') center / cover no-repeat;

   }
2. 解像度から高さを計算する
   =

   66.66%

   使用する画像の解像度から、縦と横の比率を計算します。

   今回の例では、使用する画像の横が「1920px」縦が「1280px」の解像度を使用しています。

   画像の横幅を100%とした場合に、画像の高さが横幅の何%に相当するするか計算をします。

   =

   画像の高さ

   画像の解像度を式に当てはめる。

   =

   0.666666...

   求めた値を、%に変換する

   0.666666 × 100 = 66.6666%

   小数点第一位より下を切り捨て

   画像の高さ = 66.6%
3. 余白で背景画像の高さを作る

   画像の解像度から横幅と高さの比率を計算しました。

   計算して求めた値をCSSプロパティ「padding-bottom」の値に当てはめて、要素の高さを余白で作ります。

   今回の場合は「padding-bottom: 66.6%」指定します。

   .back {

   padding-bottom: 66.6%;

   }

画像のアスペクト比

画像のアスペクト比とは、画像の縦と横に比率のことを言います。

よくある画像の縦と横の比率は「4:3」が多くそのほかにも「3:4」「16:9」などの比率があります。

アスペクト比を指定する

背景画像をアスペクト比で全体の大きさを指定して表示します。

アスペクト比を指定する場合は、画像の横幅「width」と高さ「height」のどちらか基準になります。

width基準のアスペクト比

背景画像の横幅を「width: 100%」にして最大まで広げます。

画像の横幅を基準に、アスペクト比が横幅と高さが「3:2」になるように表示します。

.back {

width: 100%;
aspect-radio: 3/2;
background: url('../image/paris.jpg') center / cover no-repeat;

}

heigth基準のアスペクト比

背景画像の高さを「height: 300px」まで広げます。

画像の高さを基準に、アスペクト比が横幅と高さが「3:2」になるように表示します。

.back {

height: 300px;
aspect-radio: 3/2;
background: url('../image/paris.jpg') center / cover no-repeat;

}

要素全体の構造

背景画像を入れる「back」クラスの親要素に、サイズ制限をする「frame」クラスを作成します。

「back」クラスは常に最大(100%)まで広がります。

親要素の「frame」クラスの大きさで、画像サイズを制限します。

要素の最大サイズの制限

パソコンなどの大きな画面では、背景画像が大きくならないように制限します。

画面サイズが「800px」より大きい時は「frame」クラスの大きさを「800px」に固定します。

さらに、「margin」の値を「auto」にして背景画像が中央に寄るようにします。

.frame {

margin: 40px auto;
max-width: 800px;

}