スタイルシートリファレンス > background-repeat

スタイルシートリファレンス background-repeat


background-repeat 背景画像の並べかたを指定する (IE4/N4)

背景画像の並べ方を指定します。

repeat
敷き詰める:規定値
repeat-x
横方向に並べる
repeat-y
縦方向に並べる
no-repeat
1つだけ表示する

▲ページ先頭へ

使用例 background-repeat

背景に画像背景画像を指定します。

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
.smp1 {
background-color: #cccccc;
background-image: url(sample.gif);
background-repeat: repeat;
}
.smp2 {
background-color: #cccccc;
background-image: url(sample.gif);
background-repeat: repeat-x;
}
.smp3 {
background-color: #cccccc;
background-image: url(sample.gif);
background-repeat: repeat-y;
}
.smp4 {
background-color: #cccccc;
background-image: url(sample.gif);
background-repeat: no-repeat;
}
-->
</style>
</head>
<body>
<p class="smp1">このように<br><br>表示されます。</p>
<br>
<p class="smp2">このように<br><br>表示されます。</p>
<br>
<p class="smp3">このように<br><br>表示されます。</p>
<br>
<p class="smp4">このように<br><br>表示されます。</p>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示

repeat

このように

表示されます。


repeat-x

このように

表示されます。


repeat-y

このように

表示されます。


no-repeat

このように

表示されます。

▲ページ先頭へ

関連項目【色・背景】

color
文字色を指定する
background
背景の指定をまとめて行う
background-color
背景色を指定する
background-image
背景画像を指定する
background-repeat
背景画像の並べかたを指定する
background-attachment
スクロールを動かした時の背景の動作を指定する
background-position
背景画像の表示位置を指定する

▲ページ先頭へ

スタイルシートリファレンス > background-repeat