Can't make two background images work

Question

Hi!

I'm trying to make it so the page has a background on the top, and a background when scrolling to the bottom. Sort of like a top and bottom styling. I tried a few things, but can't get the second one to show up at the bottom. The page is long enough to be scrollable and the images shouldn't overlap.

Any help?

html {

width: 100%;

background: url(img/topbg.jpg) scroll, url(img/bottombg.jpg) scroll;

background-position: top, bottom;

background-repeat: no-repeat, no-repeat;

-webkit-background-size: cover, cover;

-moz-background-size: cover, cover;

-o-background-size: cover, cover;

background-size: cover, cover;
}

Answer 1

You should remove these lines:

` -webkit-background-size: cover, cover;

-moz-background-size: cover, cover;

-o-background-size: cover, cover;

background-size: cover, cover;`

cover makes the image take up the whole parent element, in this case the html.