Home » CSSプロパティ一覧 » background-position：背景画像の配置

background-position：背景画像の配置

プロパティ

background-position

値

単位 | キーワード(下記参照)

[ left | center | right ]

[ top | center | bottom ]

[ パーセンテージ | px | em ]など

対象

すべての要素

継承の有無

なし

background-positionサンプル

横方向
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left top;
(background-position: 0 0;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left center;
(background-position: 0 50%;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left bottom;
(background-position: 0 100%;)
}

縦方向
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: left top;
(background-position: 0 0;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: center top;
(background-position: 50% 0;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: right top;
(background-position: 100% 0;)
}
など

[px]を使えばさらに細かな指定可能。

Tags:

2008-06-26 | コメント(0) | Page Top

TB:http://www.hp-webmagic.com/archives/112/trackback

関連性があると思われる記事

  1. background-repeat：背景画像の繰り返し
  2. background-color：背景色指定
  3. background-image：背景画像指定
  4. 非推奨属性と代替え指定
  5. position：配置指定
  6. z-index：要素の重なり
  7. clearfix：floatの解除
  8. ホームページ制作の流れ
  9. max-width：最大幅指定
  10. min-width：最小幅指定

No Comment