HOME >> スタイルシート > 背景画像の位置を指定する

　背景画像の位置を指定する

■	background-position:

指定できる値

スタイルシートでの単位

数値にptなどの単位をつけて指定する

キーワード

left    左
center  真ん中
right   右
top     上
bottom  下

パーセント

背景画像の位置を指定するには、background-positionプロパティを使います。
この前に説明したbackground-repeatの値に、no-repeatを指定すれば画像は繰り返さず画面の左上に一つだけ表示されましたが、このプロパティを使えば左上だけではなく、好きなところに画像を表示させることが出来ます。

位置の指定はまず、数値にptなどの単位をつけて設定する方法があります。最初の値には左側からの位置を指定し、半角のスペースの後の2つ目の値は、上からの位置をそれぞれ指定します。
左からの位置を100pt、上からの位置を200ptに設定したい場合は、
background-position:100pt 200pt;というように記述します。

それと、キーワードを使って位置を指定することも出来ます。キーワードには、left(左）,center（中央）,right(右）,top(上),bottom(下)の５つがあり、これらを使ってだいたいの位置を指定します。
例えば、background-position:right bottom;と記入すれば右下に画像を表示できます。

また、値は一つだけでも設定することが出来ます。その場合は左側からの位置だけを任意に指定でき、縦の位置はcenterを指定した場合と同じになります。background-position:100pt ;と記入すれば、左側からの位置が100pt、縦の位置は中央になります。
なお、topとbottomを一つで指定した場合は、横方向の位置が中央になります。

あと、パーセントを使って位置を指定することも出来ます。このプロパティはNN4.7では、対応していませんので注意して下さい。

サンプル - Microsoft Internet Explorer

左から50pt、上から50ptです。

ソース

<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>
左から50pt、上から50ptです。
</BODY>
</HTML>

サンプル - Microsoft Internet Explorer

左から80%、上から40%です。

ソース

<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>
<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

左からの位置が、150pt,上下の位置は中央です。

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
BODY { background-image:url(dog.gif);
　　　 　background-repeat:no-repeat;
　　　　 background-position:150pt;}
-->
</STYLE>
</HEAD>
<BODY>
左からの位置が、150pt,上下の位置は中央です。
</BODY>
</HTML>

サンプル - Microsoft Internet Explorer

左右の位置が左で、上下の位置が、中央です。

ソース

<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>

HOME >>スタイルシート

次のページ >>