CSSで背景画像・背景色を設定するには？backgroundプロパティの使い方

ホームページ制作を行う際、必要になるのが背景の設定です。背景は面積が広い分、全体の印象を大きく左右する重要な役割を果たします。

背景の設定には、CSSがよく使われています。背景を設定することは決して難しい作業ではありません。背景に好きな色をつけたり、画像を配置することも簡単です。今回はCSSを使った背景の設定方法をご説明します。

backgroundを使って背景を設定する

背景を指定するには、backgroundというプロパティを使います。backgroundを使うと、背景色の指定や背景画像の設置ができます。しかも、複雑な設定をすることなく、背景画像を設置位置やサイズなど細かな調整を行い、理想のデザインを構築できるのがメリットです。

backgroundでよく使うプロパティを覚えて、思った通りのデザインができるようになると楽しくなります。

背景画像を指定する方法（background-image）

背景に画像を設置するには、background-imageというプロパティを使います。サーバーにアップロードしている画像を呼び出して表示することができます。基本的な使い方は以下のような記述です。

background-image: url(“画像パス”);

画像パスは、絶対パスと相対パスのどちらでも指定可能です。絶対パスとは、URLを指定することで、画像の位置を正確に指定するものです。それに対し、相対パスは現在の階層を基準にして画像の位置を指定するものです。相対パスの指定は、絶対パスより記述が簡単に済みます。

背景画像の色々な使い方

背景画像は、必ずしも背景一面に設置するとは限りません。画像の大きさや設置する位置をコントロールすることで、幅広いデザインが可能になるのです。画像を並べて模様を構成すると、オリジナリティの高い背景を設置できます。このようなパターンを構築するには、リピートを使いこなすことが必要です。

ここで紹介するリピートの指定は以下の4種類です。background-repeatというプロパティを使います。

背景画像を縦と横に繰り返し表示する（repeat）

以下のように記述すると、相対パスを指定したsampleという画像を縦と横の両方に繰り返し表示します。画像次第で、全面水玉模様の背景などを簡単に作ることができます。

background-image: url(img/sample.png); 
background-repeat: repeat;

背景画像を繰り返さない（no-repeat）

背景画像を繰り返さず、一つだけ表示したい場合はno-repeatを指定します。先ほどのrepeatをno-repeatに変更するだけなので簡単です。

background-image: url(img/sample.png); 
background-repeat: no-repeat;

背景画像を横に繰り返す（repeat-x）

背景画像を横だけに繰り返す方法もあります。この場合は、repeat-xを使用します。X軸に画像をリピートするという意味です。

background-image: url(img/sample.png); 
background-repeat: repeat-x;

背景画像を縦に繰り返す（repeat-y）

背景画像を縦に繰り返す場合は、repeat-yを使用します。Y軸に画像を繰り返すという指定です。

background-image: url(img/sample.png); 
background-repeat: repeat-y;

背景画像の位置指定

最適な画像表示を望むため背景画像の位置を調整したいこともあるでしょう。位置調整にはbackground-positionというプロパティを使います。記述方法は以下の通りです。

background-position: 横位置 縦位置;

横位置と縦位置には、いくつかの指定方法があります。覚えておくと様々なケースに対応できる便利なものです。まず、大切なことは、横位置の初期値は左であること、縦位置の初期値は上であることです。この2点をもとに考えます。

background-position: 50px 30px;

このようにすると、左から50px、上から30pxの位置を指定していることになります。また、10%、20%などとパーセント指定も可能なため便利です。

このような細かな設定ではなく、シンプルに上、中央、下などの位置指定もできるため、ケースに応じて利用しましょう。縦位置は、top、bottom、center、横位置についてはleft、center、rightを記述できます。たとえば、以下の記述だと右下を基準にして画像を配置します。

background-position: right bottom;

ちなみに、縦横の中央に設置したい場合は以下のように記述します。この場合はcenterを2度記述する必要はなく、以下のように記述するだけです。

background-position: center;

背景画像のサイズ指定

背景画像のサイズを調整したい場合は、background-sizeというプロパティを使います。

そのままのサイズを表示する（auto）

画像の縦横サイズを変更なく表示するにはautoを指定します。

background-size: auto;

縦横の比率を保ち画像を拡大もしくは縮小させる（cover）

coverを指定すると、縦横の比率を保持したまま、全体をカバーします。はみ出した部分は表示しません。

background-size: cover;

縦横の比率を保ち画像を最大にする（contain）

縦横の比率を維持したまま画像全体を表示するにはcontainを指定します。

background-size: contain;

強制的にサイズを指定することもできる

指定したサイズで強制的に表示するために、縦横のpx（ピクセル）や%（パーセント）を記述する方法もあります。この場合、縦か横の片方にautoを指定すると、潰れた画像になりませんので、画像により活用しましょう。

background-size: 横位置 縦位置;

背景画像を重ねる方法

背景画像を複数重ねて表示することも簡単にできます。この場合もbackground-imageを使いますが、決して難しいことはなく、画像パスを追記するだけです。

background-image: url(“前に置く画像のパス”),url(“背景にする画像のパス”);

位置やサイズの指定も上記と同様の形態で、前になる画像の後に、背景となる画像を指定するだけなのです。

背景色を設定する方法（background-color）

さて、続いては背景色の設定についてご説明します。背景色の設定には、background-colorを使用します。使い方は、以下の「カラーコードもしくはカラーネーム」の部分に好きなカラーコードかカラーネームを設定するだけです。具体的な色の選択方法については次項でご説明します。

background-color: カラーコードもしくはカラーネーム;

色の設定方法について

背景色に使う色の種類を指定するにはいくつかの方法があります。カラーネーム、カラーコード、RGBのいずれかを指定します。中でもカラーネームはもっとも簡単な指定であり、ブラックやホワイトなどの定番色の指定に便利です。たとえば、以下のようになります。

background-color: black;

また、カラーコードはご存知の方も多いと思いますが、16進数のカラーコードを用います。ブラックなら#000000となり、ホワイトなら#FFFFFFとなります。カラーコードの表を見てみるのも楽しいです。また、RGBで指定する場合は、R、G、Bのそれぞれの数値を指定します。描画ツールなどでご存知の方もいることでしょう。

ホームページの印象を左右する！「カラーコード」の見方や確認方法を解説

ホームページ上では様々な色がカラーが使用されており、カラーによってホームページの印象はおおきく変化します。ホームページで色を指定するときに使われているのがカラーコードです。今回はカラーコードの概要や意味、便利なツールについてご紹介します。

背景設定はCSSの基本

背景画像と背景色の設定は、ホームページ制作について勉強すると序盤に登場する基本的なステップです。ソースコードの具体的な記述方法だけではなく、CSSの書き方をシンプルに学ぶための良い機会にもなるはずです。

また、こういった基本的な内容をしっかり把握した上で、画像や色を巧みにチョイスし、レイアウトが上手にできれば、決して難しい作業を行わなくてもセンスの良いデザインができることでしょう。まずはいろいろなパターンを試してみて、基本からじっくりCSSに向き合ってみてはいかがでしょうか。ひたすら練習あるのみですので、積極的にトライしてみましょう。

もっとCSSを学びたい

CSSでプログラミング？圧倒的にデザインが便利になる「CSSカスタムプロパティ」入門

今回は、圧倒的にデザインが便利になる「CSSカスタムプロパティ」についての基本的な使い方を解説します。 プリプロセッサーを使う時のようにコンパイルを行う必要もなく、新しく文法を覚える必要もありません。

CSSの余白調整、余白指定法

CSSの勉強をスタートすると序盤に登場するのがmarginやpaddingといった余白の指定方法です。CSSの中では初歩的な部分とはいえ、勉強をはじめてまもない頃では混乱しやすい部分の一つとも言えるのではないでしょうか。しかし、余白を自由にコントロールできることで得られるメリットはとても大きいので、苦手を乗り越え、ぜひマスターしておきたいところです。そこで、今回はCSSの余白調整にスポットをあててご説明します。