自由に背景画像を指定するには？
背景画像を画面いっぱいにしたい
background-imageが表示されない
背景画像を指定するbackgroundプロパティは、種類も使い方もさまざまでどう書けばいいのか悩みますよね。
そこで本記事では、初心者の人にも分かるように背景画像をCSSで指定する方法や表示されないときの対処方、知っておきたいテクニックまで紹介します。
CSSで背景画像を表示する基本の書き方
CSSで背景画像を設定するときは、background-imageのプロパティを使用します。
| .background { background-image: url(画像ファイルのURL); } |
相対パスと絶対パスの2通りの書き方があり、Web制作の現場では相対パスの使用が一般的です。
相対パスはフォルダ内のファイルから画像を使用するときの書き方で、ローカル環境でも作動してドメインの変更があっても、サイト構造に変化がない限り書き直す必要がないといったメリットがあります。
フォルダ内の構造が以下のときの相対パスの書き方を見てみましょう。
imgフォルダ内のbackground.pngを使用したいとします。その際にCSSフォルダ内のstyle.cssを起点として、読み込みたいファイルbackground.pngまで道順を記述したものが以下のコードです。
| .background { background-image: url(../img/background.png); } |
今回のように、起点のstyle.cssから一つ前の階層に戻るときは「../」を使用します。
絶対パスとは
URLでファイルを指定する方法で、一目でどこに何があるのか分かりやすいのがメリットです。
CSSで背景画像のサイズや位置を調整する
背景画像はCSSで以下のような変更ができます。
- 背景画像のサイズを修正する
- 背景画像の位置を調節する
- 背景画像を繰り返す
- 背景画像を固定する
気になるものをぜひチェックしてみてください。
背景画像のサイズを修正する
| .background { background-color: #b2cbe4; width: 500px; height: 500px; background-image: url(../img/background.jpg); background-size: contain; background-repeat: no-repeat;/* 繰り返して表示しない */ } |
サイズ変更はbackground-sizeを指定しましょう。
上記のコードのようにbackground-size: contain;を使用すると、画像サイズは元の縦横比を保ちます。サイズが合わない部分は、余白となり背景色で指定したブルーが表示されています。
他に指定できる値は以下の通り。
| auto | 自動で算出。画像サイズは元の大きさをキープ。 |
| cover | 元の縦横比を保持して、要素全体をカバー。 |
| contain | 元の縦横比を保持して、要素全体を表示。 |
| px ／ ％ | pxや%でサイズ指定可。 |
背景画像の位置を調節する
表示位置のを調節するときはbackground-positionを指定しましょう。
デフォルトでは左上に表示されるため、自由に配置するには場所を決めるコードを記述します。
たとえば、中央に表示させたい場合は以下を追記します。
| background-position: center center; |
一行で縦横の位置を指定でき、左側に横の位置、右側に縦の位置を書くのが基本構文です。
他に指定できる値は以下の通り。
| top、bottom、left、right、center | キーワードで指定可。 |
| px ／ ％ | pxや%で指定可。 |
背景画像を繰り返す
背景画像を繰り返すかどうかはbackground-repeatで指定しましょう。
デフォルトでは画像が縦と横に繰り返されるため、一枚だけを表示させたいときは以下のように記述します。
| background-repeat: no-repeat; |
他に指定できる値は以下の通り。
| repeat | 初期値。縦横に繰り返す。 |
| no-repeat | 繰り返さない。 |
| repeat-x | 横方向に繰り返す。 |
| repeat-y | 縦方向に繰り返す。 |
背景画像を固定する
スクロールしたときに背景を固定するか、共に移動させるかはbackground-attachmentで指定できます。
背景画像を固定しておきたいときは、以下のように記述します。
| background-attachment: fixed; |
たとえば、飲食店のWebサイトで背景に美味しそうな料理の画像を固定して、メニューセクションを際立たせるといった使い方ができます。
他に指定できる値は以下の通り。
| scroll | 初期値。背景画像をスクロールする。 |
| fixed | 背景画像を固定する。 |
| local | 指定した要素内でスクロールする。 |
CSSの背景プロパティを一行でスッキリ記述する方法
前章「CSSで背景画像のサイズや位置を調整する」でそれぞれの指定方法を紹介しましたが、backgroundを使用すると複数の背景に関するプロパティを一行で指定できます。
たとえば、以下のコードを見てください。
| .container { background-image: url(../img/background.jpg); background-repeat: no-repeat; background-position: top right; background-size: contain; } |
上記のコードをショートハンドでまとめると、以下の通り。
| .container { background: url(../img/background.jpg) no-repeat top right / contain; } |
画像、繰り返しの有無、配置場所、画像サイズの順番に指定し、画像サイズbackground-sizeを書く前には「/」を付けます。
背景色background-colorも指定するときは先頭、画像の固定の有無background-attachmentは末尾に指定します。
このようにショートハンドを使用すると、複数のコードを一行でまとまり、コードの視認性も上がって効果的です。
CSSで背景画像が表示されないときの対処法
CSSで背景画像を指定しても、適用されないときは以下を確認してみましょう。
- CSSは読み込まれているか
- CSSの記述に誤りはないか
- 絶対パスや相対パスの書き方は合っているか
- 画像は存在しているか
- widthやheightでサイズを指定しているか
- 画像が他の要素の後ろに回り込んでいないか
- 閉じタグ忘れはないか
画像が表示されていても他の要素の後ろにあるときは、z-indexで重なり順を変更してみてください。全面に表示させたい画像にz-indexを指定するだけで簡単に解決します。
また、上記で示した項目を確認しても背景画像が表示されない場合は、ブラウザのキャッシュをクリアしてページの再読み込みを試してみましょう。
背景画像が適用されない原因はさまざまです。地道な作業ですが、一つずつ原因を潰していくのが解決の近道になります。
知っておくと便利！背景画像のCSS小技3選
基礎に加えてプラスで知っておきたいことは以下の3つです。
- 背景画像を透過する
- 背景画像で複数枚を表示する
- 背景画像を重ねる
それぞれ順番に見ていきましょう。
背景画像を透過する
背景画像のみを透過させたいときはlinear-gradientやbackground-blend-modeを使用すると画像全体を均一に透過できます。
linear-gradientを使用したコードは以下の通り。
| .container { background:linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),url(../img/background.jpg); background-repeat: no-repeat; background-size: contain; } |
上記のコードでは、透過したい画像の上にlinear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))を指定して、全体に半透明の白色を重ねています。
rgbaの指定を変えれば一行でグラデーションも掛けられます。
rgba(255, 255, 255, 0.5)とは？
50%透明の白色を意味し、末尾の0.5は透明度を示しています。0に近いほど透明で、1は完全な不透明を表しています。
次にbackground-blend-modeを使用する方法を紹介します。
| .container { background-image: url(../img/background.jpg); background-color: rgba(255, 255, 255, 0.5); background-blend-mode: lighten; background-repeat: no-repeat; background-size: contain; } |
background-blend-modeは背景画像と背景色を指定して、ブレンドプロパティを指定するだけで簡単に背景画像が透けて見えるようになります。
上記のコードではbackground-blend-mode: lighten;を指定して、明るい色と混合しています。
linear-gradientとbackground-blend-modeのどちらの方法でも背景画像に半透明の効果を付与できます。とはいえ、シンプルに半透明にしたいときはlinear-gradient、複雑に混合した効果を出したいときはbackground-blend-modeなど、目的によって使い分けることが大切です。
背景画像で複数枚を表示する
複数の画像を設定するときは「,」で前後を区切ります。
基本構文は以下の通り。
| background-image: url(前面の画像ファイルパス),url(背面の画像ファイルパス); |
上記のように複数画像を出すと、最初に指定した画像が後の画像の上に重なって表示されます。
後から指定したものは背面に表示されることを覚えておきましょう。
位置の調整方法については、次の章で紹介します。
背景画像を重ねる
背景画像を重ねて表示したいときは、前面に表示させたい画像ファイルを先に記述しましょう。
たとえば、上記のように海の画像の上にヨットを浮かべるときは、ヨットの画像ファイルを先に読み込みます。その後に、background-positionで配置を調整していきます。
コードは以下の通り。
| .container { background-image: url(../img/yacht.png),url(../img/background.jpg); background-repeat: no-repeat; background-size: 100px, 500px; background-position: 100px 280px, center; } |
「,」よりも前のものがヨットの画像に指定したもので、後が海の画像のものです。
画像を繰り返して表示しないbackground-repeat: no-repeat;は両方に指定しています。
まとめ：CSSで背景画像を自由にカスタマイズしよう
CSSの背景画像は、background-imageで画像のパスを記述する必要があります。サイズや位置、背景の透過なども指定でき、さまざまな組み合わせを駆使すれば、いろいろな実装が可能です。
CSSの背景画像といっても奥が深く、多種多様なデザインカンプがあるため、基本の使い方をしっかり覚えておきましょう。
コーディングの土台をつけたい人や現場で活躍するためのコーディング力をつけたい人は、最先端のスキルが学べるデイトラWeb制作コースがおすすめです。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！