CSS【 background】4 ~ background-position

colmun_main4587

背景に関するプロパティの中に、画像の表示開始位置を指定するbackground-positionプロパティがあります。
今回は、background-positionプロパティについてまとめたいと思います。

背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background】1 ~ 背景プロパティの種類とbackground-color
CSS【 background】2 ~ background-imageでレイヤーやグラデーションも
CSS【 background】3 ~ background-repeat、background-attachment
CSS【 background】4 ~ background-position(本ページ)
CSS【 background】5 ~ background-size
CSS【 background】6 ~ background-clip、background-origin
CSS【 background】7 ~ 背景に関するショートハンドプロパティ

目次

1.background-positionプロパティ
2.background-positionプロパティの値の数
3.キーワードで指定
4.%で指定

1.background-positionプロパティ

background-positionプロパティは、背景に画像を表示させる際に、画像の表示開始位置を指定するプロパティです。

background-positionプロパティで指定する値には、次のようなものがあります。

left 背景領域での横方向の左端
right 背景領域での横方向の右端
top 背景領域での縦方向の上端
bottom 背景領域での縦方向の下端
center 背景領域での横方向の真ん中、または縦方向の真ん中
(横方向50%、または縦方向50%と同じ)
% 背景領域の幅や高さと画像の幅や高さとを%で合わせる
数値 pxやemなどの単位を付けて、背景領域の端からの距離を指定
マイナスの値も指定できる

background-positionプロパティの値は、継承されません。
また、background-positionプロパティは、全ての要素で使用できます。

leftは背景領域や背景画像の左端、rightは右端、topは上端、bottomは下端、centerは真ん中を基準にします。

キーワードで指定する場合は、横方向のleft、right、centerのどれかと、縦方向のtop、bottom、centerのどれかを指定します。指定する順番は、どちらが先でもOKです。せる指定です。

数値で指定する場合は、背景領域の左上の角が基点となります。
背景画像の左上の角を、基点からどのくらい離すかを数値で指定します。

background-positionプロパティのデフォルト値は「0 0」です。
これは、背景領域の左上の角に、背景画像の左上の角を重ね合わせた状態です。

%や数値で指定する場合は、マイナスの値も指定できます。
マイナスの値を指定すると、次のように横方向なら左へ、縦方向なら上へずれます。
colmun_image4587_01

▲目次へ戻る

2.background-positionプロパティの値の数

background-positionプロパティは、1~4個の値を半角スペースで区切って指定します。

●値を1つ指定する場合:2つ目の値を「center」とみなして、横方向と縦方向の指定となります(キーワードで指定した場合は順不同)。

●値を2つ指定する場合:「横方向 縦方向」の順で指定します(キーワードで指定する場合は順不同)。

●値を3つ指定する場合:省略された4つ目の値は「0」となります。

●値を4つ指定する場合:「横方向の位置のキーワード そこからの距離 縦方向の位置のキーワード そこからの距離」を指定します(縦と横の順序は入れ替わってもOK)。

▲目次へ戻る

3.キーワードで指定

background-positionプロパティの値をキーワードで指定する場合は、キーワードによって横方向か縦方向かは明らかなので、指定する順番はどちらが先でもOKです。

複数の画像を重ねて表示する場合で、background-positionプロパティの指定は1画像分しかない場合は、全ての画像について同じ指定となります。

デフォルト(0 0 = left top)

center left

right center

center center

bottom right

 
ソースは次の通りです。

(CSS)
div#sample {margin:0; padding:0;}
div#sample p {
width:300px;
height:180px;
line-height:180px;
text-align:center;
font-weight:bold;
color:#000;
margin:1em 0;
background-color:#F9C;
background-image:url(img/flower.jpg),url(img/purple.jpg);
background-repeat:no-repeat;}
div#sample p:nth-child(2) {background-position:center left;}
div#sample p:nth-child(3) {background-position:center right;}
div#sample p:nth-child(4) {background-position:center;}
div#sample p:nth-child(5) {background-position:bottom right;}

(HTML)
<div id=”sample”>
<p>デフォルト(0 0 = left top)</p>
<p>center left</p>
<p>right center</p>
<p>center center<br></p>
<p>bottom right</p>
</div>

各画像にbackground-positionプロパティの指定をすると、それぞれ指定された位置に表示されます。

bottom left, top right

center, bottom left

 
ソースは次の通りです。

(CSS)
div#sample {margin:0; padding:0;}
div#sample p {
width:300px;
height:180px;
line-height:180px;
text-align:center;
font-weight:bold;
color:#000;
margin:1em 0;
background-color:#F9C;
background-image:url(img/flower.jpg),url(img/purple.jpg);
background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-position:bottom left, top right;}
div#sample p:nth-child(2) {background-position:center, bottom left;}

(HTML)
<div id=”sample”>
<p>bottom left, top right</p>
<p>center, bottom left</p>
</div>

▲目次へ戻る

4.%で指定

%で値を2つ指定する場合は、横方向→縦方向の順に指定しないといけません。
%で指定する場合は、キーワード指定と違って、値だけではどの方向の指定なのか、ブラウザが把握できないからです。

横方向は、0%で背景領域の左端と画像の左端とがちょうど重なり、100%で右端同士が重なります。
縦方向は、0%で背景領域の上端と画像の上端とがちょうど重なり、100%で下端同士が重なります。

また、%の場合はマイナスの値も指定できます。
マイナスで指定すると、横方向の場合は基点から左方向へ、縦方向の場合は基点から上方向へ移動した位置となります。

0 50%

50%(50% 50% と同じ)

80% 20%

-80% -50%

100% 100%

0 100%, 100% 0

50%, 0 80%

 
ソースは次の通りです。

(CSS)
div#sample {margin:0; padding:0;}
div#sample p {
width:300px;
height:180px;
line-height:180px;
text-align:center;
font-weight:bold;
color:#000;
margin:1em 0;
background-color:#F9C;
background-image:url(img/flower.jpg),url(img/purple.jpg);
background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-position:0 50%}
div#sample p:nth-child(2) {background-position:50%}
div#sample p:nth-child(3) {background-position:80% 20%}
div#sample p:nth-child(4) {background-position:-80% -50%}
div#sample p:nth-child(5) {background-position:100% 100%}
div#sample p:nth-child(6) {background-position:0 100%, 100% 0}
div#sample p:nth-child(7) {background-position:50%, 0 80%}

(HTML)
<div id=”sample”>
<p>0 50%</p>
<p>50%(50% 50% と同じ)</p>
<p>80% 20%</p>
<p>-80% -50%</p>
<p>100% 100%</p>
<p>0 100%, 100% 0</p>
<p>50%, 0 80%</p>
</div>

background-position:80% 20%;と指定した場合は、表示される領域の左端から80%、上端から20%の位置が、画像の表示開始位置となります。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です