CSSで背景の位置と大きさを変える（ずらす）【サンプルコード付き】

先日デザインカンプからのコーディングをしている際、背景の場所をずらす必要がある場所が出てきました。

具体的にはShogoさんのデザインカンプの上の方、忙しそうなビジネスマンの背景にある丸い画像がbackground-imageで指定してある背景です。

→　土谷がコーディングしたShogoさんのデザインカンプ

→　デザインカンプの配布場所：コーディング練習用のXDデザインカンプ配布します

この丸い背景を、左から50px、下から100pxずらして表示しました。

この記事では、上で紹介したように背景の位置をずらす方法と、背景のサイズを変更する方法を説明します。

背景の位置をずらす
背景の大きさを変える
より柔軟な背景の利用を

背景の位置をずらす

背景の位置をずらすためには、background-positionプロパティを使います。

とりあえずサンプルコードを提示しておきましょう。

See the Pen Background Image 1 by gsg0222 (@gsg0222) on CodePen.

背景になる星（star.png）の位置をbackground-positionでずらしています。

サンプルコードは、背景画像を上から20％、右から40％にしろという設定です。

このように4つの引数を取る形のほか、いくつか指定方法があるので例を上げましょう。

/* 数値の引数を1つもつ場合、左からの位置を指定することになる */
/* もう片方のY座標はtop 50%で固定 */
background-position: 30%; /* 左から30%、上から50% */
background-position: 100px; /* 左から100px,上から50% */

/* topとbottomだけの場合と、rightとleftだけの場合は少しややこしい */
/* topとbottomを1つ指定した場合、X座標はleft 50%になる */
background-position: bottom; /* 下から0%、左から50% */

/* center1つを指定した場合は上からと左からそれぞれ50%の位置になる */
background-position: center;

/* 数字の引数が2つの場合は、左上からの位置を指定 */
background-position: 100px 50px; /* 左から100px、上から50px */

/* 引数を4つ渡すと辺からのオフセット値を指定できる */
background-position: bottom 30px right 100px; /* 下から30px、右から100px */

背景の大きさを変える

background-sizeを使えば、背景の大きさを変えることが出来ます。

coverというキーワードを使って、背景いっぱいに画像を表示する使い方が多い気もしますが、その他にも使い方があるのです。

See the Pen Background Image 2 by gsg0222 (@gsg0222) on CodePen.

このサンプルコードでは、もともと50px×50pxの大きさだった星の画像を、100px×100pxに変更して中央に表示しています。

その他のbackground-sizeの使い方です。

/* 引数1つの場合 */
/* containは画像を切り取ることなく、可能な限り大きく表示する */
background-size: contain;

/* coverは画像の縦横比を変えることなく、要素全体を覆うように表示します */
background-size: cover;

/* 数値だけの場合は、幅の大きさを指定します。高さはautoです */
background-size: 150px;

/* 引数2つの場合、1つ目が幅を、2つ目が高さを指定します */
background-size: 100px 200px;

サンプルコードはno-repeatにしていますが、repeatでも利用可能です。

repeatの場合は、大きさを変更した画像を繰り返します。

より柔軟な背景の利用を

背景の位置と大きさの変更方法を説明しました。

これらを使えば、より柔軟な背景の利用が出来るはずです。

もちろん、場合によってはposition: absolute;の方が有効な場合もあるでしょうけど、背景指定であれば画像が要素をはみ出す場合でもスクロールバーが出ないなどのメリットもあります。

今後の選択肢に背景の利用も入れてみてください。