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

user_17396777 0
Viewed 90

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?

css html javascript
3 Answers

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

user_108674540

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

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

user_24074600
Related