Extending background image beyond viewport on scrolling

Question

I am using an image of library bookshelves as a background for my webpage. It is repeatable and works well on a single viewport. On top of that I have a DIV with another background, which is bigger than viewport. Here what I have in my styles.css:

body {
    background-image: url("images/library4.jpg");
    overflow-y: scroll;
}

.article {
    background-image: url("images/old-paper.jpg");
    width: 95%;
}

However, when I scroll down, background does not show below. See what I am getting

I did try all imaginable CSS options, like height: auto, etc. but nothing works. Can someone please tell me what I am doing wrong and how to fix it?

Answer 1

I found the solution. The culprit was just to change the scope of the background image. I.e. instead of

body {
    background-image: url("images/library4.jpg");
    overflow-y: scroll;
}

I placed

html {
    background-image: url("images/library4.jpg");
    overflow-y: scroll;
}