よろしくお願いいたします。
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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptでオブジェクトの重...
-
removeEventListenerについて
-
指定したパスが現URLに含まれて...
-
テキストサイズ拡大・縮小のJav...
-
自働生成される<div>タグに連番...
-
Notice:Undefined index が。
-
10秒後に1秒ごとに1行づつ表示...
-
【HTML5】【canvas】【js】...
-
プルダウンメニューに画像を使...
-
タブで開いてさらにタブ内をア...
-
テキストエリア内の一部の文字...
-
検索結果を別フレームに表示したい
-
読み込んだQRコードをフォーム...
-
変数名をどのようにつけるのが...
-
removeAttribute()メソッドで削...
-
背景色を透明化
-
createElementで作成した要素を...
-
jspでcssが読み込めない
-
htmlの記述で link rel=styles...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
タブで開いてさらにタブ内をア...
-
IFRAMEの表示/非表示を切り替え...
-
変数名をどのようにつけるのが...
-
表示・非表示のスクリプトで、...
-
クリックで色変更後に既に変更...
-
jQueryでクリックされた要素のi...
-
HTMLとJavaScriptで作ったタイ...
-
console.log結果をhtmlで表示し...
-
HTMLタグに複数のクラスを設定...
-
指定したパスが現URLに含まれて...
-
iframe内のリンクが飛ばないの...
-
背景色を透明化
-
変数内容をHTML内で表示する方法
-
テキストエリア内の一部の文字...
-
classの中の<a>タグにidを追加
おすすめ情報