CSS - background-position

トップ > CSSリファレンス > background-position

概要

属性名 background-position
<position>[, <position>]*
値の詳細 <position> = <pos1> | <v-pos1> <h-pos1> | <v-pos2> && <h-pos2>
<pos1> = left | center | right | top | bottom | <percentage> | <length>
<v-pos1> = left | center | right | <percentage> | <length>
<h-pos1> = top | center | bottom | <percentage> | <length>
<v-pos2> = center | [ left | right ] [ <percentage> | <length> ]?
<h-pos2> = center | [ top | bottom ] [ <percentage> | <length> ]?
初期値0% 0%
適用可能要素すべて
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
基本CSS14.01.01.03.51.0
複数背景CSS39.03.61.010.51.3
オフセットCSS39.0132610.57.0

説明

背景画像を表示する際の基準位置を指定します。

説明
center中央に表示します。
left左側に表示します。
right右側に表示します。
top上部に表示します。
bottom下部に表示します。
<percentage>表示領域に対する割合で指定します。
<length>上端、左端等からの距離で指定します。

横方向位置、縦方向位置の順番で表示します。省略すると center と見なされます。

CSS
background-position: left top;   /* 左上 */
background-position: 20px 30px;  /* 左上から右に20px, 下に30px */
background-position: left;       /* left center と同意 */
background-position: top;        /* center top と同意 */
background-position: center;     /* center center と同意 */
background-position: 50% 50%;    /* center center と同意 */

CSS3 からは下記のようなオフセット記法も可能となりました。

CSS
background-position: right 20pt bottom 20pt;    /* 右端から20pt、下端から20ptの位置 */

使用例

CSS
.test {
  background-position: center center;
  background-image: url(./image/back.gif);
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
  border: 1px solid gray;
  margin: 0em 0em 0em 1em;
}
HTML
<div class="test">こんにちわ</div>
表示
こんにちわ

関連項目

background, background-color, background-image, background-repeat, background-attachment, background-position, background-clip, background-origin, background-size

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年11月29日
http://www.tohoho-web.com/css/prop/background-position.htm