Q&A
現在レスポンシブのサイトを作成中です。
背景の画像を固定し、その他のコンテンツは普通にスクロールできるようz-indexを使いcssのみで実装しようと思っています。
だた、現在自分で書いたコードでは背景画像も一緒にスクロールしてしまいます。どなたか修正方法が分かる方はいらっしゃいますか？
現状のHTMLとCSSを載せます。
お助けいただけると嬉しです。
html
1<body> 2<div class:"all_wrapper"> 3コンテンツが入ります。 4</div> 5</body>
css
1body { 2 height: 100vh; 3 background-image: url(../img/background.png); 4 background-position: center center; 5 background-repeat: no-repeat; 6 background-size: cover; 7 background-attachment: fixed; 8 } 9.all_wrapper { 10 position: relative; 11 z-index: 2; 12 max-width: 95%; 13 width: 95%; 14 height: auto; 15 border: none; 16 background-image: none; 17 background-color: transparent; 18 border-radius: 0; 19}
回答3件
0
再現しませんが…
あと、class="all_wrapper"ね。
コロンでも、ちゃんと動いたけど。
投稿2017/04/20 09:45
総合スコア1084
0
css
1background-attachment: fixed;
が入っているので、きちんと固定されていますね。
消すと背景もスクロールします。
投稿2017/04/20 11:31
総合スコア4666
0
ベストアンサー
Yucchiさん、こんにちは。
皆様が書き込んでいるように、上記コードだと正常に動作します。
レスポンシブサイトとのことで、ひょっとしたらモバイル端末上での
動作のことでしょうか？
もしそうであれば、こちらのサイトが参考になるかと思います。
見当違いのことであればスルーでお願いします。
投稿2017/04/21 02:33
総合スコア96
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。