background-positionプロパティ

TOPページに戻る > CSS

background-positionプロパティ

背景画像の表示位置を指定
値にはtop、bottom、left、right、centerのキーワードで指定する方法や、
%で左からの位置と上からの位置を指定する方法、pxやemなどで細かく指定する方法があります

使い方（書式）

セレクタ { background-position: 値; }

background-positionプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	しない

プロパティの値	説明
単位	px、emなどの単位。左からの表示位置と上からの表示位置を指定
%	パーセンテージで左からの表示位置と上からの表示位置を指定
left top	背景画像を左上に表示
left center	背景画像を左に表示
left bottom	背景画像を左下に表示
center top	背景画像を真上に表示
center center	背景画像を中央に表示
center bottom	背景画像を真下に表示
right top	背景画像を右上に表示
right center	背景画像を右に表示
right bottom	背景画像を右下に表示

実際の指定方法

.hoge { 
 background-position: 100px 25px;   /* 左から100px、上から25pxの位置に表示 */
 background-repeat: no-repeat;      /* 1枚だけ表示 */
 background-image: url(maru.gif);   /* 背景画像の指定 */
 height: 150px ;                    /* 要素の縦の高さ */
 }

.hoge2 { 
 background-position: 0% 50%;       /* 左から0%の位置、上から50%の位置に指定 */
 background-repeat: no-repeat;      /* 1枚だけ表示 */
 background-image: url(maru.gif);   /* 背景画像の指定 */
 height: 150px ;                    /* 要素の縦の高さ */
 }

.hoge3 { 
 background-position: right bottom; /* 右下の位置に表示 */
 background-repeat: no-repeat;      /* 1枚だけ表示 */
 background-image: url(maru.gif);   /* 背景画像の指定 */
 height: 150px ;                    /* 要素の縦の高さ */
 }

html部分

<div class="hoge">左から100px 上から25px</div>
<br>
<div class="hoge2">左から0% 上から50%</div>
<br>
<div class="hoge3">right bottom</div>

実際の表示