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