背景画像の位置指定

最適な画像表示を望むため背景画像の位置を調整したいこともあるでしょう。位置調整には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: カラーコードもしくはカラーネーム;