背景图片下方的白色区域

Question

I'm trying to get a random image every refresh on the background of my page. It works with the script below. But if I've got simply too much content, the image doesn't expand to the bottom and shows a white area where the rest of the content continues. How do I fix this? I've searched and already found things like the vertical align, changing font size and stuff like that. Also changed the backgroundPosition in the script to "center bottom" but that doesn't change anything. Any ideas?

function randomBg() {
        var bgs = new Array();
        bgs.push("images/bg/bg1.jpg");
        bgs.push("images/bg/bg2.jpg");
        bgs.push("images/bg/bg3.jpg");
        bgs.push("images/bg/bg4.jpg");
        bgs.push("images/bg/bg5.jpg");
        bgs.push("images/bg/bg6.jpg");
        bgs.push("images/bg/bg7.jpg");
        bgs.push("images/bg/bg8.jpg");
        bgs.push("images/bg/bg9.jpg");
        bgs.push("images/bg/bg10.jpg");
        document.body.style.backgroundImage = "url(" + bgs[randomize(0, bgs.length-1)] + ")";
        document.body.style.backgroundSize = 'cover';
        document.body.style.backgroundRepeat = 'no-repeat';
        document.body.style.backgroundPosition = 'center';
    }

Answer 1

Remove background-position:center . The background-size:cover will "Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area"