【jquery】スクロールで背景画像もついてくる

質問

よろしくお願いいたします。
jqueryを使って背景画像をスクロールと一緒についてくるようにしたいのですが、
思い通りにいかず、質問させていただきたいと思います。

やりたいと思っていることは、
まず背景画像1（1.jpg）をbodyにbackgroundに設定して、
その上に<div></div>タグで背景画像2（2.png：透過画像）をbackgroundに設定し、
背景画像2だけスクロールと一緒についてくるようにしたいと思っています。
現状のソースは以下になっています。

【html　head内】
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var y = $(this).scrollTop();
$('#haikei').css('background-position', '50%'+ parseInt( y / 3 ) + 'px');
});
});
</script>

【html　body内】
<div id="haikei">
<div id="wrapper">
<div id="header">
　～略～
</div>
<div id="contents">
　～略～
</div>
</div>
</div>

【CSS内】
#bg01 {
background: url(2.png) top center repeat-y;
}

今の状態だと、動き自体は思い通りに動いてくれるのですが、
背景画像を表示させたい位置がありまして、
<div id="header"></div>内には2.pngを表示させず、
<div id="contents"></div>の部分から2.pngを表示させて
スクロールについてくるようにしたいと思っています。
下記のように、

<div id="wrapper">
<div id="header">
　～略～
</div>
<div id="haikei">
<div id="contents">
　～略～
</div>
</div>
</div>

と、<div id="haikei"></div>の位置を変えてみましたが、
これだとスクロールしたときに、<div id="header"></div>の下から
画像が途中からはみ出てくる？ような感じで、きれいにスクロールされません。

さらにCSSのrepeat-yをno-repeatに変えて試してみましたが、
その場合画像がページの一番下まで動いてくれません。
（途中までしか画像がついてきてくれない感じです）

方法としては、2.pngの表示開始位置を<div id="header"></div>より下に位置指定すれば
うまくいくのかなと思ったのですが、書き方がわからず。。。
なにかうまくいく書き方はないでしょうか・・？

もしくは上記の方法以外でも、実現できそうなやり方や、
参考になりそうなサイトがあればお教えいただきたいと思っています。

ちなみに、私が参考にさせていただいたサイト様はこちらです。
http://www.webopixel.net/javascript/350.html

わかりにくい点がありましたら、補足いたします。
どうぞよろしくお願いいたします。

回答No.1

fujillin · ベストアンサー

理解力が乏しいので何をしたいのかよくわからないのと、私の環境では透過pngもbackground-positionも効かない（かの悪名高き○○）のでテストもできませんが、・・・

＞<div id="header"></div>内には2.pngを表示させず、
＞<div id="contents"></div>の部分から2.pngを表示させて
の点が問題だとして、
ご質問文からは、#bg01がどこにあるのか読取れませんけれど、#bg01に背景を設定せずに#contentsに直接かあるいはcontents内の包含要素に設定しておけばすむ話ではないのでしょうか？

お礼

ありがとうございました。

補足

さっそくのご回答ありがとうございます！
すみません、cssの表記を間違えておりました・・・

【CSS内】
#haikei {
background: url(2.png) top center repeat-y;
}

でした。。申し訳ありません。
#bg01　→　#haikei です。

>#bg01に背景を設定せずに#contentsに直接かあるいはcontents内の包含要素に
>設定しておけばすむ話ではないのでしょうか？
お教えいただいた通りのこともやってみたのですが、
位置自体は問題ないのですが、
スクロールしたときに2.pngが<div id="header"></div>の下から切れて現れるという感じというか、
例えば2.pngが水玉模様だとして、
bodyに背景画像を設定しているので、<div id="header"></div>の下から
きれいな円の水玉でなく途中からでてくる感じなのです・・。

わかりづらくて申し訳ありません。。