【CSS】background-positionで背景画像の表示位置を思い通りに調整する方法

「背景画像の上に、アイコンや切り抜き画像を重ねて表示したい」
「画像と画像が斜めに重なっているデザインを実装したい」

背景画像を活用したデザインは、Webサイト制作でよく使われる実装のひとつです。

単に画像を表示するのみならず、画像を任意の位置に表示したり画像同士を重ねて表示させたりと、的確な処理が求められます。

この記事では、background-positionの使い方を解説します。指定できる値や記述ルールなど実践的なポイントを解説しておりますので、学習にお役立てください。

この記事で身につく内容

• background-positionの使い方
• background-positionに関連するプロパティ

---

無料で30日間、Web制作が学べる『ZeroPlus Gate』
プログラミングに関する質問をエンジニアへ「し放題」のサービス！

• Web制作に特化したカリキュラム
• 自分のペースで50本以上の動画教材で学べる
• あなた専属のメンターと作る、あなただけの学習ロードマップ
• 30日間、回数無制限でエンジニアに質問可

公式サイトを見る

ZeroPlus Gateの評判・口コミを徹底調査！無料の理由を運営が解説

---

background-position：背景画像の位置を指定するプロパティ

background-positionは背景画像の位置を指定するプロパティで、以下のような実装が可能です。

background-positionを使用するには、前提としてCSSプロパティ「background-image」の使い方を理解しておく必要があります。

backgound-imageの使い方については、以下の記事で詳しく解説しています。当記事と併せて読むとさらに理解が深まるので、ぜひご活用ください。

【CSS】background-image完全ガイド｜背景画像ずれる・切れる・表示されないお悩み解決

background-imageを使用する際の基本的な記述例は以下の通りです。

<div class="bg"></div>

.bg{
  background-image: url(任意の画像パス);
  background-position: 任意の値;/*表示する位置*/
  background-size: 任意の値;/*背景画像の大きさ*/
  background-repeat: no-repeat;/*画像が繰り返すのを防ぐ*/
  height: 100vh;/*要素の高さ*/
}

この記事では、上記コードを基本として解説していきます。

background-positionの使い方

background-positionの主な使い方は以下の通りです。

それぞれの実装ができるようになれば、コーディングの幅がさらに広がります。

ぜひサンプルコードを見ながら、実践してみてください。

背景画像の位置を調整する

background-positionで背景画像の位置を調整するときの指定方法は以下の通りです。

それぞれ詳しく解説します。

位置を示す値で指定

位置を示す値は、top, left, bottom, right, centerの5つです。それぞれの値を指定したときの表示位置は下の画像のようになります。

複数の値を組み合わせることで、要素の四隅に背景画像を表示することもできます。

2つの値が位置を示す値の場合、記述の順番を入れ替えても表示結果は同じです。たとえば以下のような記述は同じ表示となります。

background-position: top left;
background-position: left top;
/*どちらも要素の左上に背景画像を表示*/

pxで指定

background-positionをpx指定する場合、background-position: 値1 値2; のように値を2つ指定します。要素の左上を起点として1つ目の値で横方向、2つ目の値で縦方向の位置を指定できます。

かめるん先生

値が2つだと1つ目が上下、2つ目が左右と思ってしまいがちですが、background-position(x,y)となり、逆になるため、注意です！

.bg{
    background-image: url(..//img/気球.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-position: 30px 30px; 
    /*要素の左端から30px、要素の上端から30pxの位置に背景画像を表示*/
}

％で指定

％指定も1つ目の値で横方向、2つ目の値で縦方向の配置を調整できます。％指定はpx指定に比べて仕組みが複雑ですが、ブラウザ幅に合わせ表示位置が可変されるためレスポンシブ対応（表示するデバイスの画面幅に応じてデザインを変える技術）に使いやすい方法です。

レスポンシブ対応についての関連記事

メディアクエリの使い方を解説-SEO対策されたレスポンシブサイトを作ろう

background-position:  X% Y%;といった形で指定し、要素の左上を基準として幅 X%・高さY%の位置と、背景画像の幅X%・高さY% の位置がそろうように画像が表示されます。

background-position: 50%  50%;とするなら、要素の左上から横50％縦50％の位置と、画像の左上から横50%縦50%の位置が重なるように背景画像が表示されます。

左右上下0%・100%で指定したときにどうなるか見てみましょう。

位置を示す値・px・%を組み合わせて指定

それぞれの値を組み合わせて指定することもできます。

位置を示す値とpxを組み合わせて指定

background-position: right 30px;/*右端、上から30px*/

background-position: 30px bottom;/*左から30px、下端*/

位置を示す値と%を組み合わせて指定

background-position: right 30%;  /*要素の右端、上端から30%*/

background-position: 30% bottom;  /*要素の左端から30%、下端*/

pxと%を組み合わせて指定

background-position: 30px 30%;  /*要素の左から30px、上端から30%*/

background-position: 30% 30px;  /*要素の左から30%、上端から30px*/

見出し風span

位置を示す値やpx、%などの指定を組み合わせるときも、1つ目の値に横方向の位置を、2つ目の値に縦方向の位置を指定するというルールは変わりません。

left・rightは横方向の値であるため1つ目の値に指定し、top・bottomは縦方向の値であるため2つ目の値に指定します。この順番を間違えるとスタイルが反映されないので注意しましょう。

反映されない記述例

background-position: top 30px;

background-position: 30px right;

背景画像を重ねて表示する

background-postionで背景画像を重ねて表示する場合、background-imageに画像のパスをカンマで区切って2つ記述します。

画像の重なり順は、先に記述した画像が前面、後に記述した画像が後面です。またbackground-position、background-repeatもそれぞれの画像に対してカンマで区切って指定します。

.bg {
    background-image: url(..//img/気球.jpg), url(..//img/草原の写真.jpg);
    height: 100vh;
    background-repeat: no-repeat, no-repeat; /*それぞれの画像に対して繰り返しをキャンセル*/
    background-position: 0 0, 10% 10%;
    /*気球の画像が親要素の左上、草原の画像が親要素の上端から10%・左端から10%の位置*/
}

このように2つの背景画像を重ね合わせることができます。

background-positionに関連するプロパティ

background-positionに関連するプロパティや使い方を紹介します。

関連するプロパティをそれぞれ理解して、正しく使い分けられるように学習していきましょう。

background-size：背景画像のサイズを調整するプロパティ

background-sizeを使えば背景画像のサイズを指定できます。background-sizeに指定できる値は以下のとおりです。

background-positionとbackground-sizeを組み合わせることで、背景画像を任意の大きさにトリミングしつつ、表示位置を調整できます。

例として、草原の画像の上に気球の画像を重ねて表示し、気球の画像をトリミングして中央に表示する実装を見てみましょう。

.bg {
   background-image: url(..//img/気球.jpg), url(..//img/草原.jpg);
   height: 100vh;
   background-position: center;/*背景画像を要素の中央に表示*/
   background-size: 10%,cover;/*気球の画像は元のサイズの10%にトリミング、草原の画像は要素幅いっぱいに表示*/
   background-repeat: no-repeat, no-repeat; /*それぞれの画像に対して繰り返しをキャンセル*/
}

※画像の周囲に余白があるように見えますが、これはbody部分の周囲にできる空白です。marginやpaddingの余白とは異なります。

複数の画像をbackgroundで指定している場合、background-positionやbackground-sizeの値はカンマで区切ることで、どちらの画像にスタイルをあてるか指定できます。複数の値を組み合わせているときも同様です。

気球の画像を左端に、草原の画像を下端、両方の画像を左右20%、上下30%の大きさで表示する例を見てみましょう。

.bg{
  background-image: url(..//img/気球.jpg), url(..//img/草原.jpg);
  background-position:left,bottom;/*気球の画像を左端、草原の画像を下端に表示*/
  background-size: 20% 30%, 20% 30%;/*気球の画像、草原の画像を横20%、縦30%にトリミング*/
}

Webサイト制作において、background-positionとbackground-sizeを併用する実装が必要な場面はよくあります。両方のプロパティの性質をよく理解して、自在に背景画像を動かせるよう練習していきましょう。

参考記事【CSS】background-imageを使いこなす！背景画像の調整方法を解説　

background-repeat：要素の繰り返しを制御するプロパティ

background-imageで指定した画像は、要素内を埋めるように繰り返し表示される性質を持ちます。

この繰り返しを制御するには、background-repeatプロパティを使用します。

background-repeatプロパティに指定できる値は以下のとおりです。

ほとんどの場合、background-imageとbackground-repeat: no-repeat;はセットで記述します。

あえて背景画像を繰り返して表示する場合、background-repeat自体を記述しないか、繰り返し表示する方向を指定します。

position：背景画像以外の要素の位置を調整するプロパティ

background-positionは背景画像に対してのみ有効なプロパティです。背景画像以外の要素の位置を調整するにはpositionプロパティを使用します。

positionプロパティを使うと、要素を画面内の任意の位置に固定して表示したり、要素を重ねて表示したりすることができます。使用できる値は以下のとおりです。

positionプロパティの使い方は以下の記事で詳しく解説しています。

【CSS】position: absolute;とposition: relative;をセットで使う方法を分かりやすく解説

background-positionが効かない場合

background-positonプロパティの指定方法によっては、設定した値が効かない場合があります。たとえば以下のケースでは、background-positonプロパティの「top 50px」はスタイルが効きません。

.bg {
    height: 100vh;
    background-repeat: no-repeat;
    background-image: url(..//img/気球.jpg);
    background-position:top 50px;
    background-size: 30%;
}

垂直方向がtop、水平方向が50pxのつもりで「top 50px」を指定してもスタイルは効きません。

background-positionプロパティで複数の値を設定する場合、「1つ目の値が横方向」「2つ目の値が縦方向」になるように値を設定する必要があります。正しいコードは次のとおりです。

background-position: 50px top; /* 横・縦の順番 */

1つ目の値が横方向なので水平方向で左上を基準に50pxの位置、2つ目の値が縦方向なので垂直方向でtop（上端）の位置です。

その他、background-positionが効かない場合は以下の原因が考えられます。

• background-positionのスペルが間違っている
• 指定するクラスやidが間違っている
• 要素の高さを指定していない
• インライン要素に指定している
• backgroundプロパティで一括指定し、上書きされている

このような問題に遭遇したときは、落ち着いて原因を探りましょう。

まとめ：background-positionを使いこなして的確に背景画像の位置を調整しよう

background-positionは背景画像の表示位置を調整できるプロパティです。その特徴を以下にまとめました。

背景画像を任意の位置に表示したり、背景画像を重ねたりできれば、表現できるデザインのアイデアを増やせます。この記事を参考に、ぜひbackground-positionの使い方をマスターしてください。

Web制作スキルを身につけるために、無料スクールを受講してみませんか？

Web制作を学習していて、「次に何を学べばいいかわからない」「1人で続けるのが大変」と感じていませんか？

そんな方におすすめなのが、0円の学習プログラム「ZeroPlus Gate」です。

ZeroPlus Gateでは、30日間でWeb制作に必要な基礎スキルを習得できます。身につけたスキルを活かして、転職・副業・フリーランスなど、キャリアの幅を広げることも可能です。

受講をきっかけに就職・転職を成功させた方も多数います。詳細は下のボタンから、公式サイトをご覧ください。

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー