背景画像を、どの場所から表示するかを指定するbackground-positionプロパティ
background-position

 背景画像を、どの場所から表示するかを指定できます。もちろん、このプロパティは背景画像を指定しているのが前提です。

 背景画像を指定している要素の左上が基準点となり、「10px 15px」「50% 25%」などと記述することで、基準点からそれだけ離れた位置に画像を表示させます。これを記述する順序は「左からの距離 上からの距離」の順です。

 ちなみに、パーセントで指定する場合、背景画像を指定している要素の幅・高さからみた割合で表示されます。

 そのほか、決められたキーワードで指定可能です。「top」「bottom」「left」「right」「center」と値がありますが、これは「0%」「50%」「100%」と指定しているのと同じ意味です。

基本データ

構文 セレクタ{background-position:値;}
継承 ×
相対的なサイズをキーワードを使って指定する場合
top、bottom、left、right、center
絶対的なサイズをpx(ピクセル)を使って指定する場合
○○px
相対的なサイズを%(パーセント)、em(イーエム)を使って指定する場合
○○%、○○em
親から継承させる場合
inherit
効果 大文字にするか小文字するかを指定できる
初期値 none
適用箇所 すべての要素

ほげほげですね。

p { background-image: url(../images/title.gif);background-position: left bottom;}

動作Webブラウザ

Internet Explorer 5.5、6.0、7.0、8.0以上
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.backgroundPosition

jQueryを使った参照方法

$('【セレクタ】').css('background-position','【値】');
$('【セレクタ】').css({'background-position':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間