ウェブ制作のCSSで、要素の背景に色や画像を指定できる「background（-image）」について、解説していきたいと思います。
バックグランドの設定は、少しポイントもあり汎用性の高いCSSでもありますので、しっかりと理解しておく事は大事ですね。
background（-×××××）プロパティ
要素の背景に色や画像を指定できるバックグランドのCSSの書き方は、大きく分けて2種類あります。
「background」と「background-×××××」になります。
「background」プロパティは、一括指定プロパティになりますので、まずは個別でしていく「background-×××××」の方から解説していきたいと思います。
なお、以下の説明はHTMLコードの中にインラインでCSSを書いていく方法にしておりますが、実際にホームページ制作する際はCSSシートに書いていく方がスタンダードの形になると思います。
background-color
background-colorプロパティは、要素の背景に色を指定できるプロパティです。
<div style="width: 100%;height: 30px; background-color: red;">[ background-color ]指定</div>
実装例
background-image
background-imageは、要素の背景に画像を指定する事ができます。
あくまでCSSに設定できますので、HTMLにて<img>タグを仕込んでいる場合は、その背面に背景画像として指定する事ができます。
画像をCSSで背景にするか、<img>タグで扱うかは用途によって変わってきますね。
今回は以下の画像（JPEG：100px×100px）を当てはめてみたいと思います。
<div style="width: 100%;background-color: red; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg');">[ background-image ]指定</div>
実装例
以上の例ですが、今回はheightの指定を外していますので、heightの領域がテキストの高さにとどまり、画像が途中で表示されなくなっています。必要に応じて、heightの指定など、height領域をとるように工夫しましょう。
また、画像は右方向に繰り返される初期設定になっています。ですので、連続するパターンの背景にする場合は、できるだけ画像を小さくして、繰り返させるようにしましょう。
とは言っても、background-imageだけの仕様ですと、ある一定の形の連続するパターンのもの（上記画像画像例）でしたら問題なくいけますが、ほとんどがそうではない時の方が多いと思いますので、これだけでは制御しきれない場合があります。
そんな時には、以下で紹介するCSSのbackgroundプロパティと併用していくのが主流になります。
background-repeat
background-repeatは、指定した画像を繰り返して表示するか、しないかを指定する事ができます。
以下で、各用途のサンプルを用意しておりますが、今回はわかりやすいように基本背景を「緑」、heightを300pxに設定しておきます。
指定なし
background-repeatプロパティ自体を設定しない状態です。
何も指定しない状態でも、画像は縦横方向に埋め尽くされるように繰り返されます。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg');">指定なし</div>
実装例1
[ repeat ]指定
[background-repeat: repeat;]は、background-repeatプロパティの初期値に当たるもので、縦横に背景画像を繰り返します。
これは、「background-repeat: repeat;」を指定せずとも同じ挙動になります（実装例1・2参照）ので、画像を繰り返して背景を埋め尽くしたい場合であっても、基本的には不要と言えます。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg'); background-repeat: repeat;">[ repeat ]指定</div>
実装例2
[ repeat-x ]指定
[background-repeat: repeat-x;]は、横方向にのみ画像を繰り返します。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg'); background-repeat: repeat-x;">[ repeat-x ]指定</div>
実装例3
[ repeat-y ]指定
[background-repeat: repeat-y;]は、縦方向にのみ画像を繰り返します。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg'); background-repeat: repeat-y;">[ repeat-y ]指定</div>
実装例4
[ no-repeat ]指定
[background-repeat: no-repeat;]は、一回だけ画像を表示します。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg'); background-repeat: no-repeat;">[ no-repeat ]指定</div>
実装例5
正直なところ、実践的には大きな背景画像を1つだけドンと置く事が多く、初期設定の画像リピートを解除する為に、この[background-repeat: no-repeat;]設定を使う事が一番多いですね。
background-position
background-positionは、指定した背景画像をどの位置を基準にするかを指定できるプロパティです。
指定できる値は、「英単語」「％」「数値」と、大きく3つのパターンがあります。
なお、[ background-repeat: no-repeat; ]設定を付与しておかなければ、画像が繰り返されて「background-position」は無効になってしまいますので、以下のサンプルでは、[ background-repeat: no-repeat; ]の設定にしています。
英単語で指定
[left・center・right]の横軸と、[top・center・bottom]の縦軸方向への英単語のグループを組み合わせて場所を指定する方法です。
例えば、[ background-position: right bottom; ]と書くと、画像を右下に配置する事ができます。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg'); background-repeat: no-repeat; background-position: right bottom;">[ right bottom ]指定</div>
実装例
ただし、各初期値は、横軸・縦軸共に[ center ]になっていますので、[ background-position: right; ]だけにすると、以下のように右真ん中に画像が配置されます。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg'); background-repeat: no-repeat; background-position: right;">[ right ]のみ指定</div>
実装例
同様に、[ background-position: bottom; ]だけにすると、真ん中下に画像が配置されます。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg'); background-repeat: no-repeat; background-position: bottom;">[ bottom ]のみ指定</div>
実装例
％で指定
％で、左上から位置を指定する事もできます。
以下の例では、左から20％、上から90％の位置に画像を配置します。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg'); background-repeat: no-repeat; background-position: 20% 90%;">[ 20% 90% ]指定</div>
実装例
数値で指定
数値で、左上から位置を指定する事もできます。
以下の例では、左から50px、上から100pxの位置から画像を開始するように配置します。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg'); background-repeat: no-repeat; background-position: 50px 100px;">[ 50px 100px ]指定</div>
実装例
オフセット値で指定
また、英単語と数値などを組み合わせたオフセット値で指定する事もできます。
オフセットとは、デザインの世界では「内側に」という意味あいになりますので、以下の例では、bottom（下）から20px、right（右）から40pxのところで画像が終わるように配置できます。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg'); background-repeat: no-repeat; background-position: bottom 20px right 40px;">[ bottom 20px right 40px ]指定</div>
実装例
background-attachment
background-attachmentプロパティでは、配置した画像をスクロールの際にどう処理していくかを決める事ができます。
scroll（固定・追従）
「scroll」で指定すると、画像をその指定の領域の同じ位置に固定する事ができます。
ただし、以下のような場合、スクロール領域というのが確保されていないとその効果を発揮できません。
スクロール領域は、内包されるテキスト（例の場合なら「[ scroll ]指定」の文字）が見えている範囲（例の場合ならheight 300px）より大きく設定した上で、CSSで「overflow: scroll;」という設定を追加する事で実装できるようになります。
ちなみに、background-attachmentプロパティの初期値は「scroll」ですので、以下のようなスクロール領域内に画像を固定したい場合は、background-attachmentプロパティを指定せずとも実装する事が可能です。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg'); background-repeat: no-repeat; background-attachment: scroll; overflow: scroll;">[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br>[ scroll ]指定<br></div>
実装例
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
[ scroll ]指定
local（通常）
「local」で指定すると、画像を追従する事なく、いつも通りに表示されます。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg'); background-repeat: no-repeat; background-attachment: local; overflow: scroll;">[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br>[ local ]指定<br></div>
実装例
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
[ local ]指定
fixed（固定）
「fixed」で指定すると、画像をユーザーの実際の視線に固定して表示する事ができます。
「fixed」を使用する場合にはスクロール領域が必要ありませんので、「height: 300px」と「overflow: scroll」の2つがなくても実装できます。というか、あれば思ったように実装されません。そのかわり、この後説明するbackground-sizeプロパティを指定しておく必要があります。
今回の例では、画像が小さいので印象が悪いですが、実践では大きな背景を扱う事の方が多くあったりしますので、一番使う方法かもしれません。
<div style="width: 100%; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; ">[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br>[ fixed ]指定<br></div>
実装例
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
[ fixed ]指定
background-size
background-sizeを指定する事で、背景画像が表示領域に対して正確なサイズになっていなくても、いい感じにマッチさせる事ができるようになります。
[ contain ]指定
containを指定すると、以下の例の場合、heightを自動的に指定領域の300pxに揃え、それに伴いwidthの幅を大きくします。
要は、自動的に枠に対して、縦横比を維持しながら拡大されるようになります。
ただし、元ある画像が拡大されるだけですので、ある程度想定したサイズで画像を用意しておかなければ解像度が荒くなってしまいますので、その点注意しておきましょう。
また、画像が繰り返されているのは、「contain」の仕様ではなく、初期値の「repeat」の仕様ですので、気になる場合は「background-repeat: no-repeat;」を設定しておきましょう。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg');background-size: contain;">[ contain ]指定</div>
実装例
[ cover ]指定
coverを指定すると、画像の真ん中上部を起点にし、縦横比を維持したまま横幅いっぱいに画像を広げて枠にフィットさせる事ができます。
以下の例を見てもらってもわかるように、手っ取り早く背景を埋めたい場合は有効ですが、枠を超えた分の画像はトリミングされてしまいますので、ある程度枠の大きさを決めた上で画像を用意する方がいいでしょう。
<div style="width: 100%;height: 300px; background-color: green; background-image:url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg');background-size: cover;">[ cover ]指定</div>
実装例
background
ここまでは、「background-×××××」という、背景画像を設定・調整するプロパティの詳細をご説明してきました。
実際にCSSでbackgroundの指定をする際には、今までご紹介してきたものを書いていく事は全然間違った事ではありません。
しかし、今から説明する「background」プロパティは、一括指定プロパティと呼ばれるもので、今まで紹介してきた設定を、全て一括で指定する事ができる便利なプロパティです。
backgroundの指定は色々複数にまたがる事も多いですので、単純に作業スピードが上がりますので、あくまで、上記「background-×××××」を理解した上で、便利表記として活用していくようにしましょう。
記載方法は、「background」プロパティに対して、「background-×××××」の「値」の部分だけを記載すればOKで、複数書く場合は、半角スペースを空けて書きつづけていけばOKですので、下のサンプルを参考にしてみてください。
なお、状況に応じて一括プロパティではいかない場合もありますので、その際は個別に記述して反応を見てみましょう。
background-color
<div style="width: 100%;height: 300px; background: green; ">[ background-color ]指定</div>
実装例
background-image
<div style="width: 100%;height: 300px; background: green url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg');">[ background-image ]追加</div>
実装例
background-repeat
<div style="width: 100%;height: 300px; background: green url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg') no-repeat;">[ background-repeat ]追加</div>
実装例
background-position
<div style="width: 100%;height: 300px; background: green url('https://designerbrg.com/blog/wp-content/uploads/2020/09/background_css1.jpg') no-repeat right bottom;">[ background-position ]追加</div>
実装例
まとめ
いかがでしたでしょうか？
サイト制作において、backgroundの指定というのは絶対に使用しなければサイトに支障が出るというものではありません。
ですので、初心者のうちは無理に実装しなくてもやっていけますが、もっとリッチなデザインにしたいという気持ちが強くなってくると欠かせないものとなります。
ですので、しっかりと、まずは「background-×××××」プロパティの事を理解した上で、「background」プロパティを使って効率化をはかっていくようにしましょう。
