How to set a background color when body size is smaller than viewport?

Issue

I have this animation in the body that makes the body shrinks to a much smaller size than viewport area. But when the body animation happens rest of the viewport background color appear white. I can't control that color and what is that area? Is it root or html? I tried to set a background-color property to root and html but it makes the body animation hidden/missing. I have a dark/black body background set after the animation. But during the body animation the rest of the background appear white and I need to change that to black.

CSS

body 
{
    background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white) fixed;
    background-repeat: no-repeat;
    background-position: top center; 
    background-size: 85% 2%; 
}
@media only screen and (max-width: 615px) and (orientation: portrait)
{
body 
{
    background-size: 85% 2%;
    animation: mooveme 0.4s;
}
}
@keyframes mooveme
{
    from
    {
        background-size: 85% 2%;
    }
    to
    {
        background-size: 45% 2%;
    }
}

JAVASCRIPT

setInterval(function() 
{      
     document.body.style.background = "rgba(0,0,0,1)";  
    
}, 400);

Adding html { background-color: rgba(0,0,0,1); } changes the first 400 ms to a black background but the body animation doesn't work. Only forcing chrome to dark mode under (chrome://flags/) can make the rest of the background black with the desired body animation. What is going on? How can I fix both?

Solution

You are not changing the size of the body at all - only the size of part of its overall background.

So to have the rest of the screen black you can just set its background color, no need to invoke JS to do that at the end of the animation, you need it throughout.

Note also that IOS has a problem with fixed attachment in some versions so this has been removed.

body 
{
    background-image: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white);
    background-repeat: no-repeat;
    background-position: top center; 
    background-size: 85% 2%; 
    width: 100vw;
    height: 100vh;
    background-color:black;
}
@media only screen and (max-width: 615px) and (orientation: portrait)
{
body 
{
    background-size: 85% 2%;
    animation: mooveme 0.4s;
}
}
@keyframes mooveme
{
    from
    {
        background-size: 85% 2%;
    }
    to
    {
        background-size: 45% 2%;
    }
}

Answered By - A Haworth