HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


背景画像の表示位置を指定する

CSSの書き方

background-position:値 値 ;

CSSの詳細情報
プロパティ名 background-position 読み方 バックグラウンド・ポジション
初期値 left top 意味 背景画像の表示位置調整
キーワード/サイズやパーセント
対象 ブロックレベル要素と置換要素
CSSレベル CSSレベル1 対応ブラウザ Windows MAC
継承 しない IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

「background-position」プロパティは、背景画像の表示位置を調節するプロパティです。「background-repeat」プロパティによって画像の繰り返し設定がされている、いないに関わらず背景画像は初期の状態では、要素の左上から開始されて表示されますが、この位置を変えることができます。

なお、このプロパティは背景画像を挿入する「background-image」プロパティのサブプロパティなので、「background-image」プロパティも同時に記述されていなければ動作しません。

値の書き方

CSSの書き方にあるように、通常は2つの値を記入しスペースで区切ります。最初の値は「横方向の位置(x座標)」を、後続の値は「縦方向の位置(y座標)」を記入します。値の書き方は、「left top」などキーワードによる指定の他に、「33px 52%」のようにサイズやパーセントで指定することもできます。キーワードによる指定については以下の表を参照してください。

キーワード 表示位置
横方向(x座標) left 画像を要素のパディングに合わせて左寄せ
center 画像を要素のパディングに合わせて中央揃え
right 画像を要素のパディングに合わせて右寄せ
縦方向(y座標) top 画像を要素のパディングに合わせて上揃え
center 画像を要素のパディングに合わせて中央揃え
bottom 画像を要素のパディングに合わせて下揃え

※画像はボックス要素のパディングに合わせられる。マージンに画像は表示されない。

値の相関関係

キーワードとパーセントによる指定の相関関係は、以下の表のようになります。

キーワード パーセント
横方向(x座標) left 0%
center 50%
right 100%
縦方向(y座標) top 0%
center 50%
bottom 100%

省略形(キーワード編)

値は1つだけ設定することも可能です。キーワードで値を1つ設定した場合、以下の表のように解釈されます。つまり、一方は必ず「center」となります。

キーワードの省略形 解釈
left left center (0% 50%)
center center center (50% 50%)
right right center (100% 50%)
top center top (50% 0%)
bottom center bottom (50% 100%)

省略形(サイズ編)

サイズによる数値で値を1つ設定した場合は「数値 center」と解釈され、数値は横方向を指定していることになります。一方、縦方向はキーワード同様「center」に固定されます。

キーワード指定の順序

キーワードで指定した場合に限り、2つのキーワードは書く順序を入れ替えることができます。つまり例えば、「top ceter」と「center top」は同じと解釈されます。

CSS/HTMLサンプル

p.bk1 { background-image:url(../../img/bg_smp.gif); background-position:center center; }
p.bk2 { background-image:url(../../img/bg_smp.gif); background-position:20px; }

段落要素にクラス指定で画像の表示位置を設定 サンプル