Image an Browserfenster anpassen

  • Hallo zusammen, ich habe folgendes Problem:

    Ich möchte ein Bild zu Beginn einer Seite einfügen, das sich automatisch der Fenstergröße (vertikal und horizontal) anpasst. Das habe ich hinbekommen.
    Das Problem ist, dass der folgende Content, der durch scrollen nach dem Bild ersichtlich sein soll, nicht nach dem Bild erscheint, sondern an einer fixen Stelle. Wie kann ich in dem Code einen Befehl einfügen, dass alle folgenden Elemente erst nach dem Bild erscheinen sollen.

    Hier mein Code:

    <style>{
    box-sizing: border-box;
    }
    .image {
    color: #000000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    </style>
    <img class="image"<img src="{!-ASSETSPATH-!}Images/paris.jpg" alt="Paris"></img>


    Das ganze soll ähnlich aussehen wie bei der Webseite https://www.hungrybirds.nl nur ohne Parallaxeffekt.

    Für jede Hilfe bin ich dankbar.