background-position: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

background-position は、背景画像の表示位置を指定するプロパティです。

このプロパティをbody要素に対して設定すると、文書全体の背景画像の表示位置を指定することができます。


body {
background-image: url(back.gif);
background-repeat: repeat-y;
background-position: right top;
}

プロパティ名 説明
background-position 以下を参照 水平方向と垂直方向の位置を指定 (初期値は 0% 0%

水平方向と垂直方向の位置は、それぞれ以下の内容で指定します。

キーワードで指定する場合

水平方向 left (左) center (中央) right (右)
垂直方向 top (上) center (中央) bottom (下)

次のように、水平方向の位置と垂直方向の位置を、半角スペースで区切って記述します。

  • background-position: right bottom; … 右下に表示
  • background-position: center center; … 中央に表示

また、次のように1つの値で指定することもできます。この場合、省略した方の位置は自動的に中央になります。

  • background-position: right; … 右の中央に表示
  • background-position: bottom; … 下の中央に表示
  • background-position: center; … 中央に表示

長さ・パーセントで指定する場合

水平方向 左からの距離を、数値+単位(px 等)またはパーセントで指定
垂直方向 上からの距離を、数値+単位(px 等)またはパーセントで指定

次のように、左からの距離と上からの距離を、半角スペースで区切って記述します。

  • background-position: 100px 40px; … 左から100px、上から40pxの位置に表示
  • background-position: 30% 60%; … 左から30%、上から60%の位置に表示

また、次のように水平方向だけで指定することもできます。この場合、垂直方向の位置は自動的に50%になります。

  • background-position: 100px; … 左から100px、上から50%の位置に表示
  • background-position: 50%; … 左から50%、上から50%の位置に表示

使用例

1つの画像を中央に表示した例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

html {
height: 100%;
}

body {
background-color: #f0f0f0;
background-image: url(neko.gif);
background-repeat: no-repeat;
background-position: center;
color: #000000;
}

</style>

</head>
<body>



</body>
</html>

表示例

[背景画像]

この画像を背景に使用した例新規ウィンドウで表示

垂直に並ぶ画像を右側に表示した例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

body {
background-color: #f0f0f0;
background-image: url(neko.gif);
background-repeat: repeat-y;
background-position: right top;
color: #000000;
}

</style>

</head>
<body>



</body>
</html>

表示例

[背景画像]

この画像を背景に使用した例新規ウィンドウで表示