After setting my background image to 100vw and height to 100vh, how can I make it responsive so that when I decrease the page size there is no need to scroll left or right?
body{
overflow-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
}
.main{
width: 100vw;
background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(pexels-hasan-albari-1229861.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-size: cover;
overflow: hidden;
background-repeat: no repeat;
}
This is the solution I have attempted.