よろしくお願いいたします。
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ベストアンサー
- 回答日時:
理解力が乏しいので何をしたいのかよくわからないのと、私の環境では透過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>の下から
きれいな円の水玉でなく途中からでてくる感じなのです・・。
わかりづらくて申し訳ありません。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
removeAttribute()メソッドで削...
-
iframe内のリンクが飛ばないの...
-
テキストエリア内の一部の文字...
-
CSSで指定したwidthをマウスで...
-
removeEventListenerについて
-
javascriptテキストBOX色を元に...
-
innerTextで文字を変えたいので...
-
jQueryでクリックされた要素のi...
-
折りたたみ部分にアンカーでリ...
-
UWSC(マウス自動化ソフト)に...
-
AutoPagerizeで対応していない...
-
背景色を透明化
-
javascriptでpostした値が取得...
-
console.log結果をhtmlで表示し...
-
innerHTMLで、関数での記載内容...
-
もう一度onclickを利用した伸縮...
-
JavaScriptで質問があります。
-
読み込んだQRコードをフォーム...
-
c++std::string型をTCHARに変換...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
背景色を透明化
-
クリックで色変更後に既に変更...
-
前回の質問の続き function mov...
-
読み込んだQRコードをフォーム...
-
IFRAMEの表示/非表示を切り替え...
-
removeAttribute()メソッドで削...
-
console.log結果をhtmlで表示し...
-
変数内容をHTML内で表示する方法
-
VideoBoxのカスタマイズ
-
[急ぎ] videoタグで埋め込んだm...
-
CSSで指定したwidthをマウスで...
-
取得した要素がインライン要素...
-
JAVAスクリプトについて
-
テキストエリア内の一部の文字...
-
jQueryで同じid属性が複数あっ...
おすすめ情報