background-imageで画像が思うように表示されない

Question

下記画像のように、薄いピンクとグレーがかったピンクの背景を表示したいのですが、表示できないです。
検索で出てきた解決法はやりましたが、画面の一部にのみ表示されたり、小さいなど添付した画像のような仕上がりにならないです。
是非、ご教示頂けますでしょうか。
よろしくお願い致します。

<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;
}

Comments

[m.ts10806]

どういうキーワードで検索しどういう記事を参考に何を試したのでしょうか

[m.ts10806]

>画面の一部にのみ表示されたり、小さい

表示されてるならタイトルは起きてる問題と合致しません

[hiro212]

ご指摘頂きありがとうございます。
タイトルを修正致しました。いかがでしょうか。

[m.ts10806]

可能なら質問本文も。
あと、

どういうキーワードで検索しどういう記事を参考に何を試したのでしょうか。
やりたいことが実現可能な参考先かどうかは判断できませんので。

Answer 1

.bannerにheight: 100vh;を加えてはどうでしょうか。

Comments

[hiro212]

ご教示頂きありがとうございます。
試してみましたが、変わらずでした。。。

[itagagaki]

images/banner-background.png がブラウザのウィンドウいっぱいに表示されればいいのですよね？
私が試した限りではそうなりましたが。

[hiro212]

申し訳ございません。できました????
ご教示頂きありがとうございました。