background-repeat: 背景画像を繰返す(敷詰める)
background-repeat: 値;
プロパティ仕様
値 | 説明 |
---|---|
no-repeat | 背景画像を繰り返さない。(固定する) |
repeat | 背景画像を繰り返す。 |
repeat-x | 背景画像を上水平一列に繰返す。 |
repeat-y | 背景画像を左端垂直一列に繰返す。 |
sampleというクラス名の背景画像にsample.gifを使用する場合−4つのサンプルです
1. background-repeat: no-repeat 背景画像を繰り返さない
sample css ↓
.sample {
height;100px;
width: 300px;
border: 1px solid #ccc;
background-image: url(sample.gif);
background-repeat: no-repeat;
}
html ↓
<html>
<body>
<div class="sample">スタイルシートはいいね</div>
</body>
</html>
実際の見え方 ↓
スタイルシートはいいね
2. background-repeat: repeat 背景画像を繰り返す
sample css ↓
.sample {
height;100px;
width: 300px;
border: 1px solid #ccc;
background-image: url(sample.gif);
background-repeat: repeat;
}
html ↓
<html>
<body>
<div class="sample">スタイルシートはいいね</div>
</body>
</html>
実際の見え方 ↓
スタイルシートはいいね
3. background-repeat: repeat-x 背景画像を上一列に繰り返す
sample css ↓
.sample {
height;100px;
width: 300px;
border: 1px solid #ccc;
background-image: url(sample.gif);
background-repeat: repeat-x;
}
html ↓
<html>
<body>
<div class"sample">スタイルシートはいいね</div>
</body>
</html>
実際の見え方 ↓
スタイルシートはいいね
4. background-repeat: repeat-y 背景画像を左横一列に繰り返す
sample css ↓
.sample {
height;100px;
width: 300px;
border: 1px solid #ccc;
background-image: url(sample.gif);
background-repeat: repeat-y;
}
html ↓
<html>
<body>
<div class="sample">スタイルシートはいいね</div>
</body>
</html>
実際の見え方 ↓
スタイルシートはいいね