#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. background-position

background-position

背景画像の配置位置

background-positionプロパティは、背景画像の表示開始位置を指定する事ができます。
背景画像の開始位置は、対象となる要素の左上に表示されます。
要素内のどの位置に表示させるかは、値を横方向・縦方向の順にスペースで区切って表示開始位置を%や数値で指定します。

背景画像の位置は、background-position:横方向 縦方向; で、プロパティの値は1つ、または2つです。
(デフォルトの値はページの左上端、0% 0% 。)
横方向の位置を左からの距離で、縦方向の位置を上からの距離で指定します。
2つの場合 1つ目の値が横方向、2つ目の値が縦方向を指定、 1つの場合 横方向の値と解釈され、縦方向は中央に表示されます。指定出来るのは
横方向  left/center/right/in(インチ)/pt(ポイント)/px(ピクセル)/%(パーセント)等
縦方向  top/center/bottom/in(インチ)/pt(ポイント)/px(ピクセル)/%(パーセント)等 です。

/* 横方向位置、縦方向位置の順番で表示します。省略はcenterになります。*/
background-position: left top; /* 左上 */
background-position: left; /* left (center) */
background-position: top; /* (center) top */
background-position: center; /* center (center) */
background-position: 50% 50%; /* center center */
background-position: 30px 50px; /* 左上から右に30px 下に50px */
background-position: right 30px bottom 50px; /* 右端から30px 下端から50pxの位置(右から・下からという指定はCSS3から。古いブラウザでは未対応なので注意。) */

画面右上に画像

body{
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: no-repeat;
   background-position: right top; /* 右・上 */
}
/* 背景固定は background-attachment: fixed; を追加 */
/* 例1-2 */
.sample1-2{
   overflow: auto; /* 複数行の場合の表示方法 */
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: no-repeat;
   background-position: right top; /* 右・上 */
}

/* 例1-3 */
.sample1-3{
   overflow: auto; /* 複数行の場合の表示方法 */
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: no-repeat;
   background-position: right 17px top; /* 右端からの距離・上 */
}

/* 例1-4 */
.sample1-4{
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: no-repeat;
   background-position: right top; /* 右・上 */
}

div等のboxは、背景画像にfixedを指定すると(画像の表示位置がboxでは無くウィンドウを基準とした位置になるので)画像の並び方によってはbox内に表示されない場合が有ります。(fixedは指定しない。)
例1-2のように画像の表示位置が右で、boxの右側に複数行表示のためのスクロールバー(overflow:で autoやscroll)が出る場合、例1-3のように background-position: 値; でboxに右端からの表示位置を設けるか、若しくは左端から右への移動分を設定しないと(right topではスクロールバーと重なってしまい)画像の右端が欠けてしまいます。
ただ、sample1-3(右端からの移動表示)のcssは未対応ブラウザも有るので使用に注意が必要です。

例1-2:背景画像を右上に表示しています。
ページのdiv boxに指定・表示しています。
div等のboxに複数行表示のためのスクロールバーが有ると、画像がスクロールバーに重なるため、画像の右端が欠けて表示されます。
background-position: right top;
/* 右・上 */
例1-3:背景画像を右上に表示しています。
ページのdiv boxに指定・表示しています。
div等のboxにスクロールバーが有る場合、重ならないように右端から画像を移動する事ができます。(未対応ブラウザも有るので注意)
background-position: right 17px top;
/* 右端からの距離・上 */
例1-4:背景画像を右上に表示しています。
ページのdiv boxに指定・表示しています。
div等のboxにスクロールバーが無ければ重なりの移動分は不要です。

画面左上に画像

body{
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: no-repeat;
   background-position: left top; /* 左・上 */
}
/* 背景固定は background-attachment: fixed; を追加 */

/* 例2-2(div boxに指定)*/
.sample2-2{
   overflow: auto;
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: no-repeat;
   background-position: left top; /* 左・上 */
}
例2-2:背景画像を左上に表示しています。
ページのdiv boxに指定・表示しています。
div等のboxは、背景画像にfixedを指定すると(画像表示位置がboxでは無くウィンドウを基準とした位置になるので)画像の並び方によってはbox内に表示されない場合が有るので注意して下さい。(fixedは指定しない。)

画面左下に画像

body{
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: no-repeat;
   background-position: left bottom; /* 左・下 */
}
/* 背景固定は background-attachment: fixed; を追加 */

/* 例3-2(div boxに指定)*/
.sample3-2{
   overflow: auto;
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: no-repeat;
   background-position: left bottom; /* 左・下 */
}
例3-2:背景画像を左下に表示しています。
ページのdiv boxに指定・表示しています。
div等のboxは、背景画像にfixedを指定すると(画像表示位置がboxでは無くウィンドウを基準とした位置になるので)画像の並び方によってはbox内に表示されない場合が有るので注意して下さい。(fixedは指定しない。)

画面右下に画像

body{
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: no-repeat;
   background-position: right bottom; /* 右・下 */
}
/* 背景固定は background-attachment: fixed; を追加 */

/* 例4-2(div boxに指定)*/
.sample4-2{
   overflow: auto;
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: no-repeat;
   background-position: right 17px bottom; /* 右端からの距離・下 */
}
例4-2:背景画像を右下に表示しています。
ページのdiv boxに指定・表示しています。
div等のboxは、背景画像にfixedを指定すると(画像表示位置がboxでは無くウィンドウを基準とした位置になるので)画像の並び方によってはbox内に表示されない場合が有るので注意して下さい。(fixedは指定しない。)