I'm working on a div called .cover-section and I want to give it a full background image that fills the viewport. I'm trying to use the cover css property to achieve this effect. So far, I've managed to make it work for the body of the page, but when I add more content and try to scroll, the image remains fixed in the background. What I actually want is for the image to scroll along with the content. Here's my current code snippet:
.cover-section {
background-image: url('../images/cover.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Any ideas on how I can achieve the desired behavior?