CSSで背景画像をbackground-imageで表示したけど「もう少し位置が上になるように調整して表示したい」もしくは「背景画像の位置を右に寄せて表示したい」など背景画像の位置を微調整したいときがあります。
そんなときにはCSSのbackground-positionをCSSで表示した背景画像と一緒に指定すると、その背景画像の位置を調整できるようになります。
CSSのbackground-positionの使い方
CSSのbackground-positionの使い方は、背景画像を指定するbackground-imageプロパティと一緒に使用して、background-positionの値で背景画像の位置を調整します。
<div class="bg_img"></div>
HTMLのdivタグにクラスを付与した要素をマークアップしてCSSでクラスセレクタにしたら、背景画像をbackground-imageの値に画像までのパスを指定し表示します。
CSSでは背景画像の高さを指定しておかないと表示されないのでheightで高さを出しておきます。
.bg_img {
background: url(smple.jpg);
height: 250px;
width: 400px;
background-repeat: no-repeat;
background-position: center;
margin: 0 auto;
}
そして表示した背景画像に対してbackground-positionプロパティを記述します。
例えば背景画像の位置を調整する画像のサイズが632×470で、実際の背景画像の表示は上のCSSのようにheight: 250px;とwidth: 400px;の要素で表示してる場合、background-position:を記述した値をcenter；で指定すると、背景画像の位置は要素の中央を起点にして中央配置になります。
しかし中央配置したけど要素サイズが小さいため、下の画像のように自分が思っていたような中央位置に背景画像が表示できないことがあります。
このようなときにはbackground-positionの値をcenterで指定するのではなく、背景画像のX座標とY座標の位置を数値と単位で指定することで、自分のイメージしていた中央の位置に背景画像を調整できます。
.bg_img {
background: url(smple.jpg);
height: 250px;
width: 400px;
background-repeat: no-repeat;
background-position: 50% 30%;
margin: 0 auto;
}
background-position: center;と指定していた記述を、例えばbackground-position: 50% 30%;と指定し直した場合。
- 50%がX座標の水平方向、つまり横方向
- 30%がY座標の垂直方向、つまり縦方向
水平50% 垂直30%の起点に変更した背景画像の位置にできます。背景画像を調整した表示結果は下の画像のようになります。
CSSのbackground-positionで背景画像の位置を調整する使い方で理解しておきたいポイントは2つです。
- background-positionの初期値
- background-positionの値の指定方法
上記2つを掘り下げて説明します。
background-positionの初期値は要素の左上
background-positionの初期値はCSSで背景画像を指定した要素の左上です。background-positionの初期値を数値にするとbackground-position: 0 0;です
例えば400×250サイズの要素の中で632×470サイズの背景画像をCSSのbackground-imageで表示しただけの場合は以下の画像のようになります。
実際の背景画像のサイズよりも小さいサイズの要素に背景画像を表示してるので画像は見切れてしまいますが、background-positionの初期値が適用されるので要素の左上を起点にした見切れた背景画像が表示されます。
background-positionは、この初期値で表示される背景画像の起点の位置を変更することができるCSSのプロパティです。
先述したbackground-position: center;を指定した背景画像の位置なら、初期値の左上を起点に、左辺から50%と上辺から50%で要素の中央が起点に変更できます。
ただし実際の画像サイズよりも小さいサイズの要素にはめ込むことになるので背景画像は見切れてしまうのですね。
一方でbackground-position: 50% 30%;で指定し直した場合は、水平方向が左の辺から右に50%と垂直方向が上の辺から下に30%の位置でbackground-positionの初期値の起点から変更できるので、要素サイズに背景画像の位置を思い通りの配置にしやすいというわけです。
このようにbackground-positionの初期値で要素の左上を起点にした背景画像の表示位置は、background-positionの値の使い方次第で位置の変更が思い通りにコントロールできるということを知識として持っておくと良いです。
background-positionの値の指定方法
CSSのbackground-positionで背景画像の位置を調整するときに使う値の指定方法は2パターンを基本的に使います。
1つ目は値を2つ指定する場合です。水平位置と垂直位置の順番に半角スペースで区切って指定します。
background-position: 50% 20%;
２つ目は値を1つだけ指定した場合です。
background-position: 100px;
１つだけ指定した値は「水平方向」の位置を上記のCSSの場合なら100pxで指定したことになり、「垂直方向」の位置は自動的に50%が適用され中央の位置になります。
深く考えると複雑になってしまうので、background-positionの初期値で要素の左上を基準に左辺と上辺からどのくらいの位置を移動するかを考えると良いです。
background-positionの値に指定する数値は主にpxや%の単位で指定します。その他にもキーワード値でも指定可能です。
垂直方向のキーワード値
- top
- center
- bottom
水平方向のキーワード値
- left
- center
- right
background-positionに使える値はけっこうあるので、背景画像をどのような位置で調整したいかによって使い分けていくのが適切な使い方と思えます。
背景画像の位置を調整して理解を深める
CSSのbackground-positionで背景画像の位置を調整する使い方がなんとなくでも理解できたら、実際に背景画像の位置を調整して理解してしまうのがコツを掴む早道です。
background-positionの値の指定方法を応用しながら、CSSで背景画像の位置を3パターンほど調整して説明します。
背景画像の位置を中央に配置する
まずは背景画像の位置をbackground-positionで中央に配置します。
background-position: 50%;
background-position: 50% 50%;
background-position: center;
background-position: center center;
background-position: top 50% left 50%;
background-position: bottom 50% right 50%;
上記のbackground-positionの値を指定したのは全て背景画像を中央に配置できます。上から順に説明します。
50%の値だけの位置調整は、背景画像の水平方向の位置を中央指定して、垂直方向は自動で50%の中央です。
50% 50%で指定した位置調整はXとY座標どちらも50%の指定で背景画像が中央に配置です。
centerのキーワード指定だと水平方向の中央が適用されます。垂直方向は自動的に中央になり、背景画像は中央配置になります。
center center;の場合はXとY方向どちらもcenter指定が適用されて中央ですね。
background-position: top 50% left 50%;の場合の中央配置は、X座標の上辺から50%にして、Y座標を左辺から50%で指定した背景画像の中央配置です。
それなのでbackground-position: bottom 50% right 50%;でも下辺から50%と右辺から50%のように位置調整に使う辺を変えて指定しただけで、けっきょく背景画像は中央に配置できることになります。
中央配置の背景画像を垂直方向に調整
背景画像の位置を中央に配置したまま、次に垂直方向に調整する場合で説明します。
とりあえず水平の横方向は50%で進めます。
background-position: 50% 20px;
background-position: 50% bottom;
background-position: 50% 20px;で指定した場合の背景画像の位置は、50%を指定した後ろの値が垂直方向に適用されるので、20pxと指定した場合は要素の上辺から20px下に位置を調整できます。
そしてbackground-position: 50% bottom;ならキーワード値のbottomを垂直方向に指定してるので、要素の下辺にピッタリくっつく位置に調整できます。
上下配置の背景画像を水平方向に寄せる
最終の背景画像の位置を調整して理解するパターンは、先ほど上下配置した背景画像を水平方向に寄せる場合です。
background-position: 5% 20px;
background-position: 10% 50%;
background-position: center right 10%;
もうだいたい背景画像の位置がどのように調整されて移動するか予想つくかとは思いますが、上のCSSの1番下のbackground-position: center right 10%;の場合は、水平方向にright 10%を記述してます。
表示結果は以下の画像のようになります。
背景画像の水平方向位置は、キーワード値のrightで要素の右辺から、10%ぶん左の位置に移動した配置になります。
うんざりするくらい背景画像の位置を調整して見ると自然と理解が深まりますが、CSSで背景画像を表示させた要素をホバーさせてbackground-positionの値を変えて移動する位置を追いかけると、よりわかりやすくなります。
まとめ
CSSのbackground-positionで背景画像の位置を調整する内容をまとめます。
background-positionの初期値は値を指定することで要素の左上の初期値起点位置を変更できる。
背景画像の位置を調整するときのbackground-positionの値は組み合わせ次第で、より柔軟な位置調整が可能になる。
背景画像の位置指定を理解しようとムキになって、ひたすら位置調整するとキリがなくなり、うんざりしてしまうので程々に理解を深める。
