linear gradient in html not covering entire page

Question

I have a simple HTML page. I want to make background of the page gradient. I have written following code but instead of creating a single gradient from black to white running from top of the page to the bottom of the page, the browser (chrome) is creating multiple small repeating patterns of the gradient. What am I doing wrong?

<!DOCTYPE html>
<html lang="en" xmlns:font-variant="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>HTML Test</title>
    <style type="text/css" media="screen">
        body{
        background-color:#000000;
        background-image:linear-gradient(#000000,#ffffff);
        }
    </style>
</head>
<body>


</body>
</html>

just found that the answer has been provided here -http://stackoverflow.com/questions/16841323/making-gradient-background-fill-page-with-css — Manu Chadha, Jan 28 '17 at 16:54

score 1 · Answer 1 · edited Apr 14 '22 at 10:38

1

Just add:

body, html {
height: 100% !important;
}

This will span the body across the whole viewport height.

edited Apr 14 '22 at 10:38

Grant

5,709
2
38
50

answered Jan 28 '17 at 16:55

Johannes

64,305
18
73
130

score 0 · Answer 2 · answered Jan 28 '17 at 17:01

0

need to specified body height or need some dummy content. then your code work fine.

<style type="text/css" media="screen">
    body{
    background-color:#000000;
    background-image:linear-gradient(#000000,#ffffff);
    height:700px;
    }
</style>

answered Jan 28 '17 at 17:01

Md.Shahjalal

393
1
6
21

linear gradient in html not covering entire page

2 Answers2