页面背景图片缩放高度问题

页面是flex布局，给body加了一张图片，样式给了height: 100%,background-size: 100% 100%;
现在如果把页面窗口缩小，文字内容超出，但是图片高度就没有了，下面会留有空白，这种情况一般怎么让图片高度设置成滚动条高度啊？

白色区域不要把高度写死，给个auto

可以给body上加个div，class=main
.main {
    background: url(xx.jpg) no-repeat;
    background-size: 100% 100%;
    bottom: 0;
    left:0;_0
    position: absolute;
    width: 100%;
}