背景画像のリピートを特定の範囲で止めたいのですが、やり方はあるでしょうか?
例えば、height:500pxまででとめるというようなことです。
http://www.htmq.com/style/background-repeat.shtml
divタグで囲って、高さを指定して背景を繰り返してはいかがでしょうか?
試したHTMLを書いておきます。
(<は半角に直してください)
<html>
<head>
<style type="text/css">
#test {
height: 500px;
background-image: url("1.png");
background-repeat: repeat;
}
#test2 {
height: 400px;
}
</style>
</head>
<body>
<div id="test">
test
</div>
<div id="test2">
test2
</div>
</body>
</html>
使用する背景画像によりますが
例えば横1px、縦500pxの背景画像を用意し「repeat-x」で横に繰り返しとでかどうでしょうか?
http://www.marguerite.jp/Nihongo/WWW/RefCSS/background-repeat.html
※URLはただのリファレンスです。
http://www.htmq.com/style/background-repeat.shtml
divタグで囲って、高さを指定して背景を繰り返してはいかがでしょうか?
試したHTMLを書いておきます。
(<は半角に直してください)
<html>
<head>
<style type="text/css">
#test {
height: 500px;
background-image: url("1.png");
background-repeat: repeat;
}
#test2 {
height: 400px;
}
</style>
</head>
<body>
<div id="test">
test
</div>
<div id="test2">
test2
</div>
</body>
</html>
こんな感じで背景を指定するエレメントの高さを抑えることになると思います。
... { background-image: url(...); background-repeat: repeat-y; height: 200px; }
jsfiddle で試しにやってみたものです。
ご覧になって、見た目のイメージを確認してみてください。
コメント(1件)