In landscape screen orientation, I would like the image and text to be scrollable. I plan to achieve this using a media query with a min-width of 768px and a max-width of 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>Wedding Invitation</h1>
<div class="yth">
<p>Without diminishing our respect, we sincerely invite you to celebrate our wedding.</p>
<div class="button">
<a href="#">Open Invitation </a>
</div>
</div>
</div>
</div>