CSSでbackground-repeatを利用しています。

背景画像のリピートを特定の範囲で止めたいのですが、やり方はあるでしょうか?
例えば、height:500pxまででとめるというようなことです。

回答の条件
  • URL必須
  • 1人5回まで
  • 13歳以上
  • 登録:2011/10/19 18:05:08
  • 終了:2011/10/26 18:10:03

ベストアンサー

id:cooper0524 No.2

cooper0524回答回数296ベストアンサー獲得回数42011/10/19 21:49:15

ポイント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>

その他の回答(2件)

id:migrantblacky No.1

migrantblacky回答回数466ベストアンサー獲得回数1012011/10/19 18:21:59

ポイント34pt

使用する背景画像によりますが

例えば横1px、縦500pxの背景画像を用意し「repeat-x」で横に繰り返しとでかどうでしょうか?

 

http://www.marguerite.jp/Nihongo/WWW/RefCSS/background-repeat.html

 ※URLはただのリファレンスです。

id:cooper0524 No.2

cooper0524回答回数296ベストアンサー獲得回数42011/10/19 21:49:15ここでベストアンサー

ポイント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>

id:mario-16 No.3

蝸牛角上争何事回答回数219ベストアンサー獲得回数212011/10/26 10:59:43

ポイント33pt

こんな感じで背景を指定するエレメントの高さを抑えることになると思います。

... {
    background-image: url(...);
    background-repeat: repeat-y;
    height: 200px;
}

http://jsfiddle.net/WddEL/

jsfiddle で試しにやってみたものです。

ご覧になって、見た目のイメージを確認してみてください。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません