Background does not extend after scrolling
The screenshot of the webpage should explain my issue very well. Keep in mind that the height which I gave to the background is height: 100vh;. so It covers the initial view of the page. The problem arrives when the inner divs overflow and the background does not extend when I scroll down. I already have tried overflow: hidden; and overflow: scroll;
This is the HTML code inside the <body> element. I am also using bootstrap for styling so you may see some bootstrap classes.
<div class="flex"> <div class="sidebar"> <div class="search sidebar-btn" sidebar-btn> <input class=" shadow-sm search-area" type="text" placeholder="search"> <div class="shadow-sm search-icon"><img class="magnifying-glass" src="assets/magnifying-glass.png"> </div> </div> <div><a href="#" class="sidebar-btn btn btn-dark">Home</a></div> <div><a href="#" class="sidebar-btn btn btn-dark">Profiles</a></div> <div><a href="#" class="sidebar-btn btn btn-dark">About Us</a></div> </div> <div id="main-area" class="page"> <div class="holder"> <div class="card polaroid"> <img src="image1.jpg" class="card-img-top" alt="..."> <div class="card-body"> <p class="card-text">Placeholder</p> </div> </div> <div class="card polaroid"> <img src="image2.jpg" class="card-img-top" alt="..."> <div class="card-body"> <p class="card-text">Placeholder</p> </div> </div> <div class="card polaroid"> <img src="image3.jpg" class="card-img-top" alt="..."> <div class="card-body"> <p class="card-text">Placeholder</p> </div> </div> <div class="card polaroid"> <img src="image4.jpg" class="card-img-top" alt="..."> <div class="card-body"> <p class="card-text">Placeholder</p> </div> </div> </div> </div> </div> This is the css. The file is too long and messy therefore I only included the relevent classes.
.flex { display: flex; flex-direction: row;} .sidebar { background-image: url("assets/wall.jpg"); background-position: center; background-size: cover; display: flex; flex-direction: column; align-items: center; padding: 5px 10px; width: 20vw; height: 100vh; border-right: 2px solid #0097A7;} #main-area{ width: 80vw; height: 100vh; background-image: url("background.jpg"); background-position: center; background-size: cover;} .holder{ padding: 15px; display: flex; flex-direction: row; flex-wrap: wrap; position: absolute; justify-content: space-around;} 
Set background-repeat: no-repeat; background-attachment: fixed; and remove the height for sidebar and main-area, in this way the background will stay in place. I also removed position: absolute; for class holder.
This is the complete CSS code:
.flex { display: flex; flex-direction: row; } .sidebar { background-image: url("assets/wall.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; flex-direction: column; align-items: center; padding: 5px 10px; width: 20vw; border-right: 2px solid #0097A7;} #main-area{ width: 80vw; background-image: url("background.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } .holder{ padding: 15px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } 
