ホーム＞コース別ガイド一覧＞背景画像の繰り返しパターンの指定をしよう！
背景画像の繰り返しパターンの指定をしよう！（background-repeat プロパティ） |
   |
使用プロパティ セレクタ { background-repeat: 繰り返しパターン; }
CSS一覧プロパティ辞典 … background-repeat プロパティ
background-repeat プロパティを使うと、背景画像の繰り返しパターンを repeat （縦と横に繰り返し表示）、repeat-x （横方向のみ繰り返し表示）、repeat-y （縦方向のみ繰り返し表示）、no-repeat （ひとつだけ表示）のいずれかで指定します。
使用例 〜値を「repeat-y」とした場合〜
body 要素に背景画像を表示しますので、セレクタに body 要素を入力し background-image プロパティを指定します。その際、background-repeat プロパティも使用して値を「repeat-y」として背景にする画像を縦方向のみに敷き詰めてみましょう！画像は同じフォルダ内のファイルを参照するとして、相対パスで指定しているので、ファイル名（ここでは「haikei.gif」）をそのまま記述します。なお、使用画像は
を使用しています。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
body {
background-color: moccasin;
background-imege: url(haikei.gif);
background-repeat: repeat-y;
}
h1 {
text-align: center;
}
span{ font-weight: bold; }
p {
text-align: center;
line-height: 1.7em;
}
p.copy { font-family: "Ｍ ＳＰ明朝",serif; }
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
ワンポインを紹介します！</p>
<p>おいしいチャーハンの作り方</p>
<p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p>
</body>
</html> |
|
使用例の表示
[background-repeatプロパティを適応しない場合のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
 |
[background-repeatプロパティ適応し値をrepeat-yとした場合の後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
このように、background-repeat プロパティを使用し値を「repeat-y」とした場合、縦方向にのみ画像が繰り返されます。
その他の値にした場合の表示
[background-repeatプロパティ適応し値をrepeat-xとした場合の後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
[background-repeatプロパティ適応し値をno-repeatとした場合の後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
このように、background-repeat プロパティを使用し値を「repeat-x」とした場合は横方向のみ繰り返し表示され、「no-repeat」とした場合はひとつだけ表示されます。
画像をアイコンのように見せよう！
CSSのみを使い文字列の頭に画像をアイコンのように表示することができます。簡単に説明すると、アイコンを表示させたい要素（見出しや段落など）にbackground-imageプロパティを使い画像を表示し、background-repeat プロパティの値を「no-repeat」にして画像を１つだけ表示します。さらに、padding-leftプロパティを指定し、画像と文字列の間隔を取れば完成です！
