background-position: ★;

CSS 114p

背景画像の表示位置の設定をします。
要素ごとにそれぞれボックスの範囲が決められています。
そのボックスの中でどの位置に画像を表示させるかを決めるタグです。
下の表の●が起点になります。ここからどのように動かすかを
次の3つの値からどれかを選びます。

  • 実数値＋単位
    水平方向（X軸）と垂直方向（Y軸）の位置を半角スペースで区切って指定をします。
    たとえば「30px 40px」と指定した場合は下の表の●から右に30px、下に40pxの位置に
    画像を表示しますとなります。また値を1つだけ指定した場合は
    水平方向（X軸）に位置を設定したことになり、垂直方向（Y軸）は「50％」に設定されます。
    値にはマイナスを入れることができません。
  • パーセント値
    パーセント値も実数値と同様に
    水平方向（X軸）と垂直方向（Y軸）の位置を半角スペースで区切って指定をします。
    この指定方法ではボックスの縦を100％、横を100％として何％の位置に設定するかを
    指定します。たとえば「0% 0%」とした場合は下の表の●の位置（一番左上）になり、
    「100% 100%」とした場合は下の表の★の位置（一番右下）になります。
    「28% 75%」とした場合は右に28%、下に75%の位置に画像を表示させるとなります。
    また値を1つだけ指定した場合は
    水平方向（X軸）に位置を設定したことになり、垂直方向（Y軸）は「50％」に設定されます。
  • 大まかな場所の指定
    水平方向（X軸）には「left center right 」
    垂直方向（Y軸）には「top center bottom」
    で位置を指定します。上の二つと同様に半角スペースを区切って指定します。
    topとleftは「0%」、rightとbottomは「100%」、centerは「50%」を指定したことになります
    値を1つしか指定しなかった場合は水平方向（X軸）の位置を指定したこととなり、
    垂直方向（Y軸）の位置は「center」に設定されます。

値の書き方は最初にX軸の値、次にY軸の値を入れるようにする。

●   →X軸

↓
Y
軸
                                        ★
 例  CSS

h1 {
margin: 0 0 1em 0;
background-image: url(001.gif);
padding: 5px;
background-position: bottom;
background-repeat: repeat-x
}

h2 {
margin: 0 0 1em 0;
background-image: url(002.gif);
padding: 5px;
background-position: 20px 5px
background-repeat: no-repeat
}

p {
margin: 0 0 1em 0;
background-image: url(003.gif);
padding: 5px;
background-position: 100% 100%
background-repeat: no-repeat
}
 XHTML
<h1>
これはh1にbottomを設定したものです。
<⁄h1>

<h2>
これはh2に20px 5pxと設定したものです。
<⁄h2>

<p>
これはpに100% 100%と設定したものです。
<⁄p>

これをXHTMLとCSSで表すとこうなります！
ここをクリック！

トップに戻る