前提・実現したいこと
wordpressの固定ページをスマホで見るとヘッダーの背景画像が正しい大きさせ表示されません。
googlechromeのディベロッパーツールでスマホ表示すると正しく表示されます。
原因はなんでしょうか。
画像がおかしくなるのはヘッダー部分のみです。他のところは正しく表示されます。
該当のソースコード
html
1<div class="wrap-header"> 2 <div class="header"> 3 <div class="header-des"> 4 <h2>Alohapost Cooking School</h2> 5 <p>ハワイを通して”食べる楽しさ”と”作る楽しさ”を</p> 6 <div class="book"> 7 <a href="#for-book" class="book-btn">予約する</a> 8 </div> 9 </div> 10 </div> 11 </div>
css
1.wrap-header{ 2 display: flex; 3 justify-content: center; 4} 5 .header{ 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 width:100%; 10 background-image: url('img/header.jpg'); 11 background-position: center; 12 background-size: cover; 13 background-attachment: fixed; 14 position: relative; 15 color:white; 16 text-align: center; 17 } 18 .header::before{ 19 background-color: rgba(0,0,0,0.2); 20 position: absolute; 21 top: 0; 22 right: 0; 23 bottom: 0; 24 left: 0; 25 content: ' '; 26}
試したこと
画像を変えたりしたが同じ現象が起きた。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。