Webサイトで背景などの画像を表示するとき一般的にはHTMLで表示しますが、CSSでも表示することは可能です。CSSを利用する場合のサイズや位置などの指定方法を解説します。CSSで指定するメリットもあわせて確認しましょう。

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)はこちら

CSSで画像を設定する理由

Webサイトなどで画像を表示する際には、HTMLを使った方が簡単に設定できます。あえてCSSで表示する理由はあるのでしょうか。まずはCSSで画像を設定する理由について解説します。

若手、新人エンジニアの成長を阻む 人材育成5つの失敗と解決策はこちら

レスポンシブデザインへの対応

レスポンシブデザインとは、表示する画面のサイズによってWebサイトのデザインを変化させる仕組みのことです。

スマホとパソコンでは画面のサイズがまったく異なります。見る側が使うデバイス画面の大きさに応じて文字のサイズや並び、画像のサイズなどを変えるのがレスポンシブデザインの役割です。

HTMLで画像を表示させていると、デバイスに合わせてサイズを変える際、画面によっては画像が引き伸ばされてしまうなどして歪んで表示されることがあります。

CSS側から画像を設定する場合、「background-size」というプロバティを使うことができます。background-sizeを使うと画像が縦や横に引き伸ばされることなく表示できるため、レスポンシブデザインに対応させるには画像設定にCSSを使うのがよいでしょう。

background-sizeプロバティとは

「background-size」とは、背景の画像サイズを指定するためのプロバティです。画面幅に収まるサイズで画像の大きさを指定することができます。「background-size」では、次のような値を使います。

• auto：画面の大きさに合わせて自動でサイズが決定する
• contain：縦横の比率を保持したまま、画像が入る要素の大きさにおさまるサイズに決定する
• cover：縦横の比率を保持したまま、要素を覆うサイズで画像の大きさを決定する
• （数値）px：pxという単位で指定した数値に対応するサイズに決定する
• （数値）％：要素の大きさに対しての割合を%で指定したサイズに決定する

それぞれの値を使うとどのような見た目で表示されるかは、実際に上記の値を入れて確かめてみましょう。

■関連記事

CSSで背景を編集する方法

ページの背景はサイトのイメージに大きく影響します。単色にしたいなら色を、表示させたい画像があるならその画像をCSSで設定しましょう。CSSで背景を編集する方法を、色と画像に分けて解説します。

背景色を指定する方法

Webサイトの背景背景色を指定する場合、「background-color」というプロバティを使います。命令文は以下のとおりです。

background-color: #ff0000;

「#ff0000」は、色コードで赤を示しています。この部分に色コードもしくは色の名前（赤であれば「red」）を記述することで、背景の色を操作できます。

初期値の場合は、親要素の色が背景色となります。何も設定されていない場合に表示される背景色は白です。

背景に画像を使う方法

背景に画像を挿入する場合は、「background-image」というプロバティを使います。日本語訳の「背景画像」そのままの意味合いのため、覚えやすいでしょう。記述するコードは以下のとおりです。

background-image：url(画像のパス);

画像のパスの部分は、絶対パス（httpからはじまるファイル名）もしくは相対パス（../../ファイル名など）という形で指定します。ファイル名はセミコロンで囲みましょう。

「background-image」は位置の指定やリピート指定など、細かいルールを決めて設置できます。詳しい設定方法は「背景を調整する方法」「画像のスタイルを変更する」の項目で説明しています。

■関連記事

背景を調整する方法

レスポンシブデザインで背景の位置や焦点を調整する方法について、具体的なコードサンプルを提示して解説します。

簡単なWebサイトの改修の内製化を目指すフロントエンド(HTML・CSS・JavaScript)入門5日はこちら

background-size：coverで指定の領域に表示

background-size：coverでは、画像の引き延ばしや比率の変更を行うことなく、表示領域を画像全体で覆うように表示してくれます。HTMLからオブジェクトを呼び出すときに記述する「object-fit」と似たような挙動です。

background-image: url(背景画像のパス);
background-size: cover;

最初に設定したい画像を指定し、その画像に適用するスタイルとして記述する形です。

background-position:で焦点を調整する

背景画像を挿入する際には、デフォルトでは左上を基準に配置されるようになっています。ただしサイトのデザインによっては、真ん中や右下を基準に画像を表示したいケースもあるでしょう。

画像が表示される基準点（焦点）を操作したいときは「background-position:」というプロバティを使います。書き方は以下のようになります。

background-position:30% 40%;

最初の数値が左からの位置、2番目の数値は上からの位置を指しています。この場合はページ全体を枠として左から30％、上から40％の位置を中心に画像を表示することになります。

位置指定はピクセル（px）でも可能ですが、レスポンシブデザインに対応するため％を使うのが一般的です。%指定であれば、デバイスのサイズごとに焦点を記述する必要がありません。

■関連記事

画像のスタイルを変更する

background-imageを使った画像設定では、サイズを変えたりトリミングをしたりとスタイルを柔軟に変更できます。同じ画像を繰り返して表示する・移動や固定するような設定も可能です。それぞれの方法を詳しく見ていきましょう。

短期5日・10日講座(Java・フロントエンド)研修実績はこちら

画像サイズを変更する

画像のサイズを変更する場合は「background-size: 」を使います。数値での指定だけでなく、「cover」や「contain」など自動で調節してくれる値も使用可能です。以下のような記述をすれば、画像サイズと縦横幅をまとめて指定することもできます。

background-image:url(画像のパス);
background-size:cover;
width:100%;
height:300px;

画像サイズをcover（指定の領域に表示）に、横幅を画面の100％に、縦幅を300ピクセルにという指定を行っています。

画像をトリミングする

トリミングとは画像の一部を切り取ってピックアップすることです。画像タグへのスタイル指定の中にトリミングしたい縦横のサイズを記述し、「object-fit: cover;」を挿入すると任意のサイズに切り取れます。

background-image:url(画像のパス);
background-size:cover;
width:100px;
height:200px;
object-fit: cover;

上記では、横幅100px・縦幅200pxで切り取るように指示しています。

同じ画像を繰り返して利用する

画面の中で、同じが像を繰り返して使いたい場合は「background-repeat」というプロパティを使います。繰り返しの仕方も指定できるので、表を参考に覚えておきましょう。

• repeat：縦と横に繰り返す
• no-repeat：繰り返しは行わない
• repeat-x：縦方向にだけ繰り返す
• repeat-y：横方向にだけ繰り返す
• round：画像を拡大・縮小して全体調整しつつ繰り返す
• space：画像間にスペースを入れて調整しつつ繰り返す

background-repeat:repeat-x;

と記述すれば、画像を縦方向にだけ繰り返すという指示になります。

画像を固定または移動させる

画面をスクロールするときに画像を同じ場所に固定しておくか、スクロールとともに移動させるかを指定することができます。この場合には「background-attachment」プロパティを使います。

• scroll：画像をスクロールの動きに伴って移動させる
• fixed：スクロールしても、画像を移動させない
• local：指定された要素の領域に画像を固定する

上記の3種類が一般的に使われている値です。

background-attachment:fixed;

というような記述の仕方になります。上記の場合は背景画像に設定したイメージが固定されるため、スクロールしても位置が変わりません。

■関連記事

Webサイトにあった背景を設定しよう

画像をその場に表示するだけならHTMLから指定した方が簡単ではありますが、背景画像を設定するにはCSSを使った方が便利な場面もあります。

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)資料ダウンロードはこちら

位置やサイズの調整・スクロールに合わせる（または固定する）、トリミングするなどさまざまな指定ができます。Webサイトのデザインやコンセプトにあった背景の設定を行い、イメージ通りのデザインに仕上げましょう。