背景画像の調整は、Web制作に必要な技術のひとつです。単に画像を表示するだけでなく、画像を任意の位置に表示したり、画像同士を重ねて表示したりするなどの表現を行うこともよくあります。
背景画像でこのようなデザインを作るには、background-positionプロパティを使用します。
この記事では、background-positionプロパティの使い方を解説します。使用できる値や記述時のルールなど、実践的なポイントを解説しておりますので、学習にお役立てください。
- background-positionの使い方
- background-positionに関連するプロパティ
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
background-positionでできること
background-positionは背景画像の位置を指定するプロパティです。background-positionプロパティを使用することで、背景画像の表示位置を調整したり、背景画像を重ねたりできます。
背景画像を重ねると、以下のような表示が可能です。
背景画像を指定するために、まずはbackgound-imageプロパティで背景画像を設定する必要があります。backgound-imageプロパティの使い方はこちらの記事で詳しく解説しています。併せてお読みください。
background-positionの使い方
背景画像の位置を調整する
backgorund-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;
%指定
background-postionでは%指定も可能です。px指定と同様、1つ目の値が横方向、2つ目の値が縦方向の指定です。
ただし、%指定の場合は以下のルールに従って背景画像の表示位置を決定します。
- 画像の左上から指定した%分の位置
- 要素の左上から指定した%分の位置
以上の2点が重なるポイントに画像が表示されます。
たとえば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%の位置*/
}
background-positionに関連するプロパティ
background-size
background-sizeでは、背景画像のサイズを指定できます。
background-sizeに指定できる値は以下のとおりです。
指定できる値 | 値の意味 |
auto | 元の画像の大きさで表示する |
contain | 元画像の縦横比のまま、要素内に元画像がすべて収まる 要素の高さが画像の高さより大きい場合、繰り返し表示される |
cover | 元画像の縦横比のまま、要素内で可能な限り大きくする |
数値+単位 | 任意の数値と単位で表示する |
%指定 | 要素内の%比率で指定する |
background-sizeの使い方については、こちらの記事で詳しく解説しております。併せてお読みください。
background-repeat
background-imageで指定した画像は、要素内を埋めるように繰り返し表示される性質を持ちます。この繰り返しを制御するには、background-repeatプロパティを使用します。
background-repeatプロパティに指定できる値は以下のとおりです。
指定できる値 | 値の意味 |
repeat（初期値） | 背景画像を繰り返し表示する |
no-repeat | 背景画像を繰り返さない |
repeat-x | 背景画像を横方向だけ繰り返して表示する |
repeat-y | 背景画像を縦方向だけ繰り返して表示する |
background-repeat: no-repeat; は使用頻度の高い指定です。背景画像の繰り返しをキャンセルするときは、background-repeat: no-repeat; を指定しましょう。
position
background-positionは背景画像に対してのみ有効なプロパティです。背景画像以外の要素の位置を調整するにはpositionプロパティを使用します。
positionプロパティを使うと、要素を画面内の任意の位置に固定して表示したり、要素を重ねて表示したりすることができます。使用できる値は以下のとおりです。
指定できる値 | 値の意味 |
fixed | 要素を固定してスクロールに追従する |
relative | 要素の重ねるときの基準となる要素を指定する |
absolute | 要素を重ねるときの前面となる要素を指定する |
static | positionの指定を解除する |
stiky | スクロールと一緒に動く |
positionプロパティの使い方はこちらの記事で詳しく解説しています。
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つ目の値が縦方向
- 複数の値がどちらも位置を示す値のときのみ順不同
背景画像を任意の位置に表示したり、背景画像を重ねたりすることができれば、表現できるデザインのアイデアが増えます。完成度の高いWebサイトを作成できるようになるためにも、background-positionの使い方をマスターしましょう。
Web制作初学者を脱するために
Web制作のスキルは現在とても注目されています。Web制作スキルを身につければ、副業やフリーランスとして独立することも可能です。そのため、Web制作を学んでみたい！という方は多いのではないでしょうか。
しかし、Web制作は学習途中で挫折しやすいことも事実です。挫折してしまう原因のひとつは、「次に何を学習していいかわからない」という状態になってしまうことです。
これを防ぐためには、学習ロードマップを活用するのがおすすめです。Web制作のロードマップは、こちらの記事で詳しく解説しております。いち早く初学者を抜け出すために、こちらの記事で紹介しているロードマップをぜひ活用してください。
「もっと効率よく学習したい！」「独学だと自信がないから人から教わりたい」という方はZeroPlus Gateの受講がおすすめです。
ZeroPlus Gateは、30日間でWeb制作を学べる学習プログラムです。エンジニアとしての経験豊富な講師陣があなたの学習をサポートするため、飛躍的に成長できます。しかも、受講料は完全無料。
Web制作で副業したい、スキルアップしたい方にはぴったりなサービスです。あなたもZeroPlus Gateで、成長への一歩を踏み出してみませんか？
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
