【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
わかりにくい点がありましたら、補足いたします。
どうぞよろしくお願いいたします。
お礼
ご回答ありがとうございます。時代に合わせていろいろと技術が開発されるのですね。
補足
自己解決しました。 iPadやiPhoneで、なぜか右側にマージンができなかったのですが、bodyタグにcssで以下のような設定をするとバグ？を回避できました。 body {width:100%;}