Q&A
タイトルに「至急」とか入れるのは割と反感買いやすいのでやめといた方が良いです。
Bootstrapでレスポンシブのサイトを作っています。
以下の様なコードをindex.htmlの中に記述をしています。
uploads/image-design-5-DH0.jpg 部分が背景画像になります。
HTML
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url("uploads/image-design-5-DH0.jpg"); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url("uploads/image-design-5-DH0.jpg")" id="section_2" data-pix-offset="72">
CSS
.pix-hotel-1 { background-image: linear-gradient(rgba(54, 63, 72, 0.85), rgba(54, 63, 72, 0.85)), url('../uploads/image-design-5-DH0.jpg'); background-size: cover; background-attachment: fixed; background-position: -330px; -webkit-background-size: cover; background-size: cover; }
image-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
これは何が原因でしょうか？
クロームで見た場合
iPhoneXの実機で見た場合
よろしくお願いします。
ご指摘ありがとうございます。
修正させていただきました。
head要素内で、ビューポート指定効かせてます？
こちらビルダーで作っているので、あまり詳しくないのですが、以下の記述がございます。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
それで全然大丈夫ですね・・・。
回答いたしましたので、どうかご覧いただければと思います。
コピペして真似していますが、画像自体が表示されなくなってしまいました。
一つずつ確認していくしかなさそうです。
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="background:url(./uploads/image-design-5-DH0.jpg); display:block; position:fixed; top:0; left:0; z-index:-1;wdth:100%;height:100vh;">
私の回答関連でしたら、そちらにコメントくださいな。
回答の方のコメントでお答えいたしますね。
回答1件
0
background:fixedでの背景固定はiOS（iPhone）でうまく動かないのでこれを使いましょう | 大阪のホームページ制作会社YCOM
iPhoneの有名なバグのようです。
以前まで、position: fixedもバグが散見されたので、
CSSで位置を固定させるのが未だに苦手なようです。
下記で、意図した動きになったかと。
（Xcode付属の、iPhone Xsのシミュレータで、期待通りの動きか確認済）
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 5<meta charset="UTF-8"> 6<title>Q196317</title> 7<style type="text/css"> 8#bgDiv { 9 /* 背景画像のパスには注意 */ 10 background: url(./uploads/image-design-5-DH0.jpg); 11 /* background-size: coverはきかせる */ 12 background-size: cover; 13 display: block; 14 position: fixed; 15 top: 0; 16 left: 0; 17 /* こちらに効かせるのは、負の整数の-1です */ 18 z-index: -1; 19 width: 100%; 20 height:100vh; 21} 22#wrapper { 23 position: relative; 24 /* こちらに効かせるのは、正の整数の1です。 */ 25 z-index: 1; 26} 27</style> 28</head> 29<body> 30<div id="wrapper"> 31 <div id="bgDiv" class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1"></div> 32 他の内容内容 33</div> 34</body> 35</html>
投稿2019/06/21 15:41
編集2019/06/21 16:45総合スコア9528
リンクありがとうございます。確認してみます。
background-attachment: fixedと、background-size: cover;を同時に使うと、
バグで、表示がおかしくなるので、
別の方法をとるということです。
URL貼った記事を最後までご覧いただければと思います。
実は私も以前同じ現象に悩まされたのを思い出しました。
その時は、記事に記載されているような、苦肉の策を使った記憶がございます。
おそらくですが、z-index: -1によって、bodyの下に潜り込んでしまっているのでしょう。
背景画像を効かせた、divを一段、全てコンテンツを包含したdivで囲います。
<div id="wrapper">
<div class="pix_section 〜以降省略></div>
〜他の内容〜
</div><!-- wrapperの終了 -->
みたいな感じ。
で、この親divに対して、position: relative; z-index: 1;を効かせます。
そうすることによって、コンテンツ全体自体は、z-index1が効いた状態なので、
その上で、背景画像をきかせているdivに、z-index: -1を効かせても、
0に戻るだけとなるため、下に潜らせつつ、
内容自体は、z-index: 1なので、表示ができます。
ご丁寧にありがとうございます。
やはり真っ白になってしまい、画像が表示されない様です。
<div id="wrapper" style="z-index:-1; position:relative;">
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="background:url(uploads/Untitled-design-5-DH0.jpg)center no-repeat; display:block; position:fixed; top:0; left:0;wdth:100%;height:100vh;">
</div>
あ、wdth となってます。
正しくは、widthです。
なるほど、今動くソースを確認しておりますので、
動いたソースを回答に貼り付けます。
あ、takeshi1907さん、id="wrapper"の方に効かせるのは、z-index: 1です。
で、背景画像の方のdivにきかせるのが、z-index: -1です。
ありがとうございます！
すごく惜しいところまでできたのですが、他のレイアウトが崩れてしまう様です。
HPはスクロールすると画像を覆い隠す様に下からコンテンツが上がってくる様な作りになっているのですが、画像が一番上の階層にきてしまい、スクロールするとコンテンツが画像の下に入ってしまう様です。
うーん、そこまでくると、本質問の要件外になってしまいます・・・。
厳しいようですが、本質問の要件は満たせた形になっているかと思いますので、
これ以上は、作業依頼となってしまいます 汗
この先は、ご自身で、改修されるのがいいかと・・・！
ただ、あとは、要素の階層の整理、z-indexの順番、そして、bootstrapで効いているCSSの確認、整理で、
解決していけるかと思います。
色々と本当にありがとうございました。
一つずつ確認しながらもう少し頑張ってみようかと思います。
あなたの回答
tips
プレビュー
