解決したいこと 検証画面のような背景画像の表示にしたいです
スマホ表示では、以下の画像のような背景画像になってしまいます。
![
検証画面では、以下のようになっています
ちなみに次の画像は、pc表示です
html
1 <section class="top"> 2 <div class="ttl" id="ttl"> 3 <h1>Reo Watanabe</h1> 4 <h2>Welcome to My Portfolio</h2> 5 </div> 6 <div class="scroll-btn" id="scroll-btn"> 7 <span></span> 8 Scroll 9 </div> 10 </section>
scss
1.top{ 2 height:100vh; 3 background-image: url("image/S__15196194.jpg"); 4 background-size: cover; 5 background-position: center center; 6 overflow: hidden; 7 border-bottom: solid 1px rgba(112,121,112,0.5); 8 font-family: "Times"; 9 display: flex; 10 position: relative; 11 justify-content: center; 12 .ttl{ 13 text-align: center; 14 color:#E4E4E4; 15 opacity: 0.8; 16 font-weight: 100; 17 align-self:center; 18 width:60%; 19 h1{ 20 font-size: 80px; 21 font-weight: 200; 22 } 23 }
scssはコンパイル済みです。
検証画面の表示と実際の表示が異なっていて困っています。よろしくお願いします
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。