スタイルシートリファレンス > background-position

スタイルシートリファレンス background-position


background-position 背景画像の表示位置を指定する (IE3/N6)

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

横方向の位置

left
center
中央
right
割合指定
px
数値指定

縦方向の位置

top
center
中央
bottom
割合指定
px
数値指定


相対的な長さ

px
画像を構成する最小単位 (モニタの解像度により変化)
em
文字の高さを1とした単位 (フォントサイズにより変化)

絶対的な長さ

cm
センチメートル
mm
ミリメートル

▲ページ先頭へ

使用例 background-position

画像を中央にひとつだけ表示します。

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
BODY {
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: center center;
}
-->
</style>
</head>
<body>
このように表示されます。
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示

このように表示されます。

▲ページ先頭へ

関連項目【色・背景】

color
文字色を指定する
background
背景の指定をまとめて行う
background-color
背景色を指定する
background-image
背景画像を指定する
background-repeat
背景画像の並べかたを指定する
background-attachment
スクロールを動かした時の背景の動作を指定する
background-position
背景画像の表示位置を指定する

▲ページ先頭へ

スタイルシートリファレンス > background-position