下記画像のように、薄いピンクとグレーがかったピンクの背景を表示したいのですが、表示できないです。
検索で出てきた解決法はやりましたが、画面の一部にのみ表示されたり、小さいなど添付した画像のような仕上がりにならないです。
是非、ご教示頂けますでしょうか。
よろしくお願い致します。
<div class="banner"> <div class="banner-wrapper"> <!-- banner1 --> <div class="banner-content"> <img src="images/banner1.png" alt="banner-photo1"> <p>Lorem ipsum dolor sit amet, consectetur adip<br>iscing elit, sed do eiusmod tempor incididunt ut<br> labore et dolore magna aliqua. </p> <div class="btn-content"> <a href="#" class="btn-border">more<i class="fas fa-angle-double-right"></i></a> </div> </div> <!-- banner2 --> <div class="banner-content"> <img src="images/banner2.png" alt="banner-photo2"> <p>Lorem ipsum dolor sit amet, consectetur adip<br>iscing elit, sed do eiusmod tempor incididunt ut<br> labore et dolore magna aliqua. </p> <div class="btn-content"> <a href="#" class="btn-border">more<i class="fas fa-angle-double-right"></i></a> </div> </div> <!-- banner3 --> <div class="banner-content"> <img src="images/banner3.png" alt="banner-photo3"> <p>Lorem ipsum dolor sit amet, consectetur adip<br>iscing elit, sed do eiusmod tempor incididunt ut<br> labore et dolore magna aliqua. </p> <div class="btn-content"> <a href="#" class="btn-border">more<i class="fas fa-angle-double-right"></i></a> </div> </div> <!-- banner4 --> <div class="banner-content"> <img src="images/banner2-1.png" alt="banner-photo2-1"> <p>Lorem ipsum dolor sit amet, consectetur adip<br>iscing elit, sed do eiusmod tempor incididunt ut<br> labore et dolore magna aliqua. </p> <div class="btn-content"> <a href="#" class="btn-border">more<i class="fas fa-angle-double-right"></i></a> </div> </div> <!-- banner5 --> <div class="banner-content"> <img src="images/banner2-2.png" alt="banner-photo2-2"> <p>Lorem ipsum dolor sit amet, consectetur adip<br>iscing elit, sed do eiusmod tempor incididunt ut<br> labore et dolore magna aliqua. </p> <div class="btn-content"> <a href="#" class="btn-border">more<i class="fas fa-angle-double-right"></i></a> </div> </div> <!-- banner6 --> <div class="banner-content"> <img src="images/banner2-3.png" alt="banner-photo2-3"> <p>Lorem ipsum dolor sit amet, consectetur adip<br>iscing elit, sed do eiusmod tempor incididunt ut<br> labore et dolore magna aliqua. </p> <div class="btn-content"> <a href="#" class="btn-border">more<i class="fas fa-angle-double-right"></i></a> </div> </div> </div> </div>
.banner { background-image: url(images/banner-background.png); background-size: cover; } .banner-wrapper { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
回答1件
あなたの回答
tips
プレビュー