背景画像を、どの場所から表示するかを指定する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':'【値】'});

CSSタグリファレンス インデックス

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



TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH