 サンプル - Microsoft Internet Explorer |
|
左から50px、上から50pxです。
|
背景画像の位置を指定する
■background-position:
指定できる値
スタイルシートでの単位
数値にptなどの単位をつけて指定する
キーワード
left 左
center 真ん中
right 右
top 上
bottom 下
パーセント
背景画像の位置を指定するには、background-positionプロパティを使います。
この前に説明したbackground-repeatの値に、no-repeatを指定すれば画像は繰り返さず画面の左上に一つだけ表示されましたが、このプロパティを使えば左上だけではなく、好きなところに画像を表示させることが出来ます。
位置の指定はまず、数値にptなどの単位をつけて設定する方法があります。最初の値には左側からの位置を指定し、半角のスペースの後の2つ目の値は、上からの位置をそれぞれ指定します。
左からの位置を100px、上からの位置を200pxに設定したい場合は、
background-position:100px 200px;というように記述します。
それと、キーワードを使って位置を指定することも出来ます。キーワードには、left(左）,center（中央）,right(右）,top(上),bottom(下)の５つがあり、これらを使ってだいたいの位置を指定します。
例えば、background-position:right bottom;と記入すれば右下に画像を表示できます。
また、値は一つだけでも設定することが出来ます。その場合は左側からの位置だけを任意に指定でき、縦の位置はcenterを指定した場合と同じになります。
background-position:100px ;と記入すれば、左側からの位置が100px、縦の位置は中央になります。
なお、topとbottomを一つで指定した場合は、横方向の位置が中央になります。
あと、パーセントを使って位置を指定することも出来ます。
HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
body { background-image:url(dog.gif);
background-repeat:no-repeat;
background-position:50pt 50pt;}
-->
</style>
</head>
<body>
左から50px、上から50pxです。
</body>
</html>
|
サンプル - Microsoft Internet Explorer |
|
左から80%、上から40%です。
|
HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
body { background-image:url(dog.gif);
background-repeat:no-repeat;
background-position:80% 40% ;}
-->
</style>
</head>
<body>
左から80%、上から40%です。
</body>
</html>
|
サンプル - Microsoft Internet Explorer |
|
右下に表示されます。
|
HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
body { background-image:url(dog.gif);
background-repeat:no-repeat;
background-position:right bottom;}
-->
</style>
</head>
<body>
右下に表示されます。
</body>
</html>
|
サンプル - Microsoft Internet Explorer |
|
左からの位置が、150px,上下の位置は中央です。
|
HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
body { background-image:url(dog.gif);
background-repeat:no-repeat;
background-position:150pt;}
-->
</style>
</head>
<body>
左からの位置が、150px,上下の位置は中央です。
</body>
</html>
|
サンプル - Microsoft Internet Explorer |
|
左右の位置が左で、上下の位置が、中央です。
|
HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
body { background-image:url(dog.gif);
background-repeat:no-repeat;
background-position:left;}
-->
</style>
</head>
<body>
左右の位置が左で、上下の位置が、中央です。
</body>
</html>