0

Can't make two background images work

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; }

8th Nov 2019, 10:35 AM
Attila Bálint
Attila Bálint - avatar
1 ответ
+ 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.
8th Nov 2019, 8:19 PM
Veliside
Veliside - avatar