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

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?

CodePudding user response：

use !important keyword for background change or set color in aninamtion too


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 !important;
}
@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%;
    }
}


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 !important;
}
@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%;
        backgroun-color: black;
    }
    to
    {
        background-size: 45% 2%;
        backgroun-color: black;
    }
}

CodePudding user response：

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

CodePudding user response：

To set the background of the root element - just confirming you used the pseudo selector :?

/* Selects the root element of the document:
   <html> in the case of HTML */
:root {
  background: yellow;
}

That said, sounds like there are some anomalies that crop up if you set the background of both the body and html elements, where if you set the <html> background then the <body> element behaves just like a regular <div> element, that is, it's height will be determined by it's content.

https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

https://developer.mozilla.org/en-US/docs/Web/CSS/:root

CodePudding user response：

If it doesnt work just in your mobile browser try to delete your chrome cache in your setting/Apps/chrome(or any browser that you use)/storage/clear cache. Then try again.