Social proof section

Hi every one, this is my 7th challenge on front end mentor, and It was hard to set background images, I used the following css properties

background-image: url('images/bg-pattern-top-mobile.svg'), url('images/bg-pattern-bottom-mobile.svg');
background-repeat: no-repeat, no-repeat;
background-position-y: top, bottom;
background-position-x: left, right ;

to set two background in the body element (mobile view), unfortunately it did not work, and the height of the body element was less than the content (I do not understand why), its height equals the screen of the mobile), but when used the same properties inside the main element it worked. so I would be happy if someone explained why these properties did not work for body element but did for the main element and why the body had less height when I used these properties.