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

　画像の貼り方を指定する

■	background-repeat:

指定できる値

キーワードで指定

repeat     全体に繰り返す
repeat-x   横方向のみに繰り返す
repeat-y   縦方向のみ繰り返す
no-repeat  一つだけ表示する

ページやテーブルの背景に画像を使った場合、通常は画面やテーブル全体に同じ画像が繰り返し表示されますが、background-repeatプロパティを使えば、画像の繰り返し方法を設定することが出来ます。
値にrepeat-xを指定すれば横方向のみに画像が貼り付けられ、また、値にrepeat-yを指定すれば、縦方向のみに画像が貼り付けられます。
no-repeatを指定すれば、縦方向、横方向に繰り返すことなく、ひとつだけ画像が表示されます。

サンプル - Microsoft Internet Explorer

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

ソース

<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

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

ソース

<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

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

ソース

<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

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

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
BODY  {background-image:url("dog.gif");
　　　 　background-repeat:repeat;   }
-->
</STYLE>
</HEAD>
<BODY>
画面全体に、画像が貼り付けられます。
</BODY>
</HTML>

HOME >>スタイルシート

次のページ >>