　画像の貼り方を指定する

■background-repeat:

指定できる値

キーワードで指定

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

ページやテーブルの背景に画像を使った場合、通常は画面やテーブル全体に同じ画像が繰り返し表示されますが、background-repeatプロパティを使えば、画像の繰り返し方法を設定することが出来ます。

値にrepeat-xを指定すれば横方向のみに画像が貼り付けられ、また、値にrepeat-yを指定すれば、縦方向のみに画像が貼り付けられます。

no-repeatを指定すれば、縦方向、横方向に繰り返すことなく、ひとつだけ画像が表示されます。

サンプル - Microsoft Internet Explorer

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

HTML&CSS

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

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

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

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