Make image and text can be scrolled when landscape

Question

i want to make image and text can be scrolled when the screen orientation landscape and i want use media query when the screen min-width:768px max-width:1024px

body{

    background: url("/img/prewed.jpeg") no-repeat center ;

    background-attachment: fixed;

    background-size: cover;

    width: 100%;

    height: auto;

    color: #fff;

    z-index: -1;

    overflow-y:auto;

}


@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    body{

        display: flex;

      background-repeat: no-repeat;

      min-width: 100vw;

      min-height: 100vh;

      background-position: center;

      background-size: 100% 100%;

      
    }

<div class="container">


        <div class="tittle">

            <h1>Undangan Pernikahan</h1>

            <div class="yth">
                <p>Tanpa mengurangi rasa hormat kami mengundang anda untuk hadir memeriahkan acara pernikahan kami</p>

                <div class="button">

                    <a href="#">Buka Undangan </a>

                </div>

            </div>

        </div>

    </div>



    

Answer 1

You can make the background image scrollable with the following property:

background-attachment: scroll;