I got the wrong background when I set the margin property to zero on the body element
I'm just learning HTML and CSS a few days ago by watching videos and reading related tutorials at the W3C. I may have missed some important points.
I want to animate a gradient background using css. And the next is my css and html code:
body{
margin: 0;
background: linear-gradient(132deg,#ec5218,#1665c1);
background-size: 400% 400%;
animation: BackgroundGradient 30s ease infinite;
}
@keyframes BackgroundGradient{
0%{background-position: 0% 50%;}
50%{background-position: 100% 50%;}
100%{background-position: 0% 50%;}
}
h1{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
<!doctype html>
<html>
<head>
<title>Gradiendt Background</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>There is a gradient background.</h1>
</body>
</html>
When I run the code, I get a white background, not a linear gradient background. But if I set the background property to one color on the body element like blue, it works. Or I set the field property to a non-zero value like 1px, I would get the correct linear gradient background that I want. Perhaps I really missed sth.
Can anyone give me some advice? I would appreciate.
source to share
You have defined for the h1
element property position:absolute;
, so the element is completely removed from the normal flow of the document.
and
you set for body
a margin:0
, this causes it to body
get the height to 0 so no background is displayed. (default body is 8px).
To fix, define min-height
for body
:
Fix:
body {
min-height: 1px;
margin:0;
//more code...
}
body{
margin:0;
min-height: 1px;
background: linear-gradient(132deg,#ec5218,#1665c1);
background-size: 400% 400%;
animation: BackgroundGradient 30s ease infinite;
}
@keyframes BackgroundGradient{
0%{background-position: 0% 50%;}
50%{background-position: 100% 50%;}
100%{background-position: 0% 50%;}
}
h1{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
<body>
<h1>There is a gradient background.</h1>
</body>
source to share
Body
has no height since the child is detached from flow through position:absolute
., so 400% of the height doesn't give a background 0 height when trying to resize it.
You can safely set min-height:100vh
to Body
to close the viewport and it will show even if the background is set to HTML.
Else, any value min-height
will be sufficient to cover the viewport unless html
it has a background definition.
See https://www.w3.org/TR/css3-background/#special-backgrounds to understand the behavior background
when html
and / or Body
.
3.11.2. Canvas background and HTML element
For documents whose root element is an HTML [HTML401] HTML element or an XHTML [XHTML11] html element: if the computed value of the "background-image on the root element" is "none" and its "background color" is transparent, the user agents should instead This propagates the computed values of the background properties from this element first to the HTML BODY or the XHTML body element. The used values for these BODY element background properties are their initial values, and common values are treated as if they were specified in the root element. It is recommended that HTML authors specify the canvas background for the BODY element rather than the HTML element.
body{
margin: 0;
background: linear-gradient(132deg,#ec5218,#1665c1);
background-size: 400% 400%;
animation: BackgroundGradient 30s ease infinite;
min-height:100vh;
}
@keyframes BackgroundGradient{
0%{background-position: 0% 50%;}
50%{background-position: 100% 50%;}
100%{background-position: 0% 50%;}
}
h1{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
<!doctype html>
<html>
<head>
<title>Gradiendt Background</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>There is a gradient background.</h1>
</body>
</html>
source to share