背景画像の調整は、Web制作に必要な技術のひとつです。単に画像を表示するのみならず、画像を任意の位置に表示したり画像同士を重ねて表示させたりと、的確な処理が求められます。
そこで本記事では、背景画像の表示位置を調整するためのCSSプロパティ「background-position」の使い方を解説します。指定できる値や記述ルールなど実践的なポイントを解説しておりますので、学習にお役立てください。
- background-positionの使い方
- background-positionに関連するプロパティ
無料でプログラミングの質問ができるサービス
30日間無料でweb制作が学べるZeroPlus Gate！
- Web制作に特化
- 50本以上の動画教材で学べる
- 30日間に4回の学習サポート面談がある
- Slackで質問し放題
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
background-position：背景画像の位置を指定するプロパティ
background-positionは背景画像の位置を指定するプロパティです。背景画像の表示位置を調整したり、背景画像を重ねたりといった使い方ができます。
background-positionを利用するには、前提としてCSSプロパティ「background-image」を使用して、背景画像を表示する方法を押さえておく必要があります。backgound-imageの使い方は以下の記事で詳しく解説しているため、併せてお読みください。
background-positionの使い方
この章では、background-positionの使い方を具体的に解説します。
背景画像の位置を調整する
background-positionで背景画像の位置を調整するときの指定方法は以下のとおりです。
- 位置を示す値で指定
- px指定
- %指定
それぞれ詳しく解説します。
方向を示す値で指定
方向を示す値は、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つ目の値で縦方向の位置を指定できます。
.bg{
background-image: url(..//img/気球.jpg);
height: 100vh;
background-repeat: no-repeat;
background-position: 20px 30px;
/*要素の左端から20px、要素の上端から30pxの位置に背景画像を表示*/
}
方向を示す値とpx指定を組み合わせることもできます。
background-position: right 30px;/*右端、上から30px*/
background-position: 20px bottom;/*下端、左から20px*/
数値と位置を示す値を組み合わせるときには、1つ目の値に横方向、2つ目の値に縦方向の位置を指定します。left・rightは横方向の値であるため、1つ目の値に指定し、top・bottomは縦方向の値であるため、2つ目の値に指定します。この順番を間違えるとスタイルが反映されないので注意しましょう。
反映されない記述例
background-position: top 30px;
background-position: 30px right;
％指定
％指定も最初の値で横方向、二番目の値で縦方向の配置を調整できます。％指定はpx指定に比べて仕組みが複雑ですが、ブラウザ幅に合わせ表示位置が可変されるためレスポンシブ対応に使いやすい方法です。
background-position: X% Y%;といった形で指定し、要素の左上を基準として幅 X%・高さY%の位置と、背景画像の幅X%・高さY% の位置がそろうように画像が表示されます。
background-position: 50% 50%;とするなら、要素の左上から横50％縦50％の位置と、画像の左上から横50%縦50%の位置が重なるように背景画像が表示されます。
％指定の事例をいくつか確認してみましょう。
背景画像を重ねる
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に指定できる値は以下のとおりです。
指定できる値 | 調整内容 |
auto | 元の画像の大きさで表示する |
contain | 元画像の縦横比のまま、要素内に元画像がすべて収まる 要素の高さが画像の高さより大きい場合、繰り返し表示される |
cover | 元画像の縦横比のまま、要素内で可能な限り大きくする |
px指定 | 任意のpxサイズで表示する |
%指定 | 要素内の%比率で指定する |
参考記事【CSS】background-imageを使いこなす！背景画像の調整方法を解説
background-repeat：要素の繰り返しを制御するプロパティ
background-imageで指定した画像は、要素内を埋めるように繰り返し表示される性質を持ちます。この繰り返しを制御するには、background-repeatプロパティを使用します。background-repeatプロパティに指定できる値は以下のとおりです。
指定できる値 | 値の意味 |
repeat（初期値） | 背景画像を繰り返し表示する |
no-repeat | 背景画像を繰り返さない |
repeat-x | 背景画像を横方向にだけ繰り返して表示する |
repeat-y | 背景画像を縦方向にだけ繰り返して表示する |
position：背景画像以外の要素の位置を調整するプロパティ
background-positionは背景画像に対してのみ有効なプロパティです。背景画像以外の要素の位置を調整するにはpositionプロパティを使用します。
positionプロパティを使うと、要素を画面内の任意の位置に固定して表示したり、要素を重ねて表示したりすることができます。使用できる値は以下のとおりです。
指定できる値 | 値の意味 |
fixed | 要素を固定してスクロールに追従する |
relative | 要素を重ねるときの基準となる要素を指定する |
absolute | 要素を重ねるときの前面となる要素を指定する |
static | positionの指定を解除する |
stiky | スクロールと一緒に動く |
positionプロパティの使い方は以下の記事で詳しく解説しています。
【CSS】position: absolute;とposition: relative;をセットで使う方法を分かりやすく解説
background-positionが効かない場合
background-positonプロパティの指定方法によっては、設定した値が効かない場合があります。たとえば以下のケースでは、background-positonプロパティの「top 50px」はスタイルが効きません。
<div class="bg-layer">
<div class="bg"></div>
</div>.bg-layer {
height: 100vh;
width: 100%;
background-color: lightcyan;
}
.bg {
width: 100%;
height: 100%;
max-width: 200px;
background-image: url(dummy.png);
background-size: contain;
background-repeat: no-repeat;
background-position: top 50px;
}
垂直方向がtop、水平方向が50pxのつもりで「top 50px」を指定してもスタイルは効きません。
background-positionプロパティで複数の値を設定する場合、「1つ目の値が横方向」「2つ目の値が縦方向」になるように値を設定する必要があります。正しいコードは次のとおりです。
background-position: 50px top; /* 横・縦の順番 */1つ目の値が横方向なので水平方向で左上を基準に50pxの位置、2つ目の値が縦方向なので垂直方向でtop（上端）の位置です。
まとめ：background-positionを使いこなして的確に背景画像の位置を調整しよう
background-positionは背景画像の表示位置を調整できるプロパティです。その特徴を以下にまとめました。
- 背景画像の表示位置を指定できる
- 背景画像を重ねて表示することも可能
- 位置を示す値（top, leftなど）、数値px、割合（％）で位置を指定
- 複数の値を指定する場合は1つ目の値が横方向、2つ目の値が縦方向
- 複数の値がどちらも位置を示す値のときのみ順不同
背景画像を任意の位置に表示したり、背景画像を重ねたりできれば、表現できるデザインのアイデアを増やせます。この記事を参考にぜひbackground-positionの使い方をマスターしましょう。
Web制作の学習に迷ってしまったあなたへ
Web制作スキルを身につければ、副業やフリーランスとして独立できます。とはいえWeb制作は学習途中で挫折しやすいことも事実。挫折してしまう原因のひとつは、「次に何を学習していいかわからない」状態になってしまうことです。
そこで当メディアでは、現在Web制作を学ぶあなたが学習に迷ってしまったときのために学習ロードマップを用意しています。
こちらを読めば、Web制作を効率的に身につける道筋を理解できるようになりますよ。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
