background-position: ***;
| ブラウザ |
|
|---|---|
| プロパティ |
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;… 中央に表示
長さ・パーセントで指定する場合
次のように、左からの距離と上からの距離を、半角スペースで区切って記述します。
background-position: 100px 40px;… 左から100px、上から40pxの位置に表示background-position: 30% 60%;… 左から30%、上から60%の位置に表示
また、次のように水平方向だけで指定することもできます。この場合、垂直方向の位置は自動的に50%になります。
background-position: 100px;… 左から100px、上から50%の位置に表示background-position: 50%;… 左から50%、上から50%の位置に表示
使用例
<!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>
- 表示例
-