CSS - background-position

概要

属性名background-position
値<bg-position>#
値の詳細<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]
初期値0% 0%
適用可能要素すべて
継承継承しない
メディアvisual
アニメーション不可
サポートhttps://caniuse.com/mdn-css_properties_background-position

説明

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

値説明
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-2024 杜甫々
初版：1997年7月27日、最終更新：2024年12月29日
https://www.tohoho-web.com/css/prop/background-position.htm