背景画像のリピートを特定の範囲で止めたいのですが、やり方はあるでしょうか？
例えば、height:500pxまででとめるというようなことです。
No.2
296
4
33pt
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＞
No.1
466101
34pt
使用する背景画像によりますが
例えば横1px、縦500pxの背景画像を用意し「repeat-x」で横に繰り返しとでかどうでしょうか？
http://www.marguerite.jp/Nihongo/WWW/RefCSS/background-repeat.html
※URLはただのリファレンスです。
No.2
2964
ここでベストアンサー
33pt
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＞
No.3
21921
33pt
こんな感じで背景を指定するエレメントの高さを抑えることになると思います。
... { background-image: url(...); background-repeat: repeat-y; height: 200px; }
jsfiddle で試しにやってみたものです。
ご覧になって、見た目のイメージを確認してみてください。
26
25
2
コメント（1件)