HOME >> スタイルシート > 画像の貼り方を指定する

point 画像の貼り方を指定する

background-repeat:
指定できる値
キーワードで指定
repeat     全体に繰り返す
repeat-x 横方向のみに繰り返す
repeat-y 縦方向のみ繰り返す
no-repeat 一つだけ表示する
ページやテーブルの背景に画像を使った場合、通常は画面やテーブル全体に同じ画像が繰り返し表示されますが、background-repeatプロパティを使えば、画像の繰り返し方法を設定することが出来ます。
値にrepeat-xを指定すれば横方向のみに画像が貼り付けられ、また、値にrepeat-yを指定すれば、縦方向のみに画像が貼り付けられます。
no-repeatを指定すれば、縦方向、横方向に繰り返すことなく、ひとつだけ画像が表示されます。
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

横方向だけ、画像が貼り付けられます。

ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
BODY  {background-image:url("dog.gif");
     background-repeat:repeat-x;   }
P      { margin-top:25px; }
-->
</STYLE>
</HEAD>
<BODY>
横方向だけ、画像が貼り付けられます。
</BODY>
</HTML> 
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

縦方向だけ、画像が貼り付けられます。

ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
BODY  {background-image:url("dog.gif");
     background-repeat:repeat-y;   }
P      { margin-left:25px; }
-->
</STYLE>
</HEAD>
<BODY>
縦方向だけ、画像が貼り付けられます。
</BODY>
</HTML> 
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)
<

一つだけ、画像が貼り付けられます。

ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
BODY  {background-image:url("dog.gif");
     background-repeat:no-repeat;   }
-->
</STYLE>
</HEAD>
<BODY>
一つだけ、画像が貼り付けられます。
</BODY>
</HTML> 
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

画面全体に、画像が貼り付けられます。

ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
BODY  {background-image:url("dog.gif");
     background-repeat:repeat;   }
-->
</STYLE>
</HEAD>
<BODY>
画面全体に、画像が貼り付けられます。
</BODY>
</HTML> 
Copyright ©2001〜2011 まさぼ〜 All Right Reserved