Gradient not working with position:absolute

StackOverflow https://stackoverflow.com/questions/21415522

  •  04-10-2022
  •  | 
  •  

Вопрос

I'm trying to get a linear gradient working as the background of my page. The gradient is not showing at all, and the background remains white. Here's the minimal code to reproduce the issue:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <style type="text/css">
    body
    {
        width:100%;
        margin-left:-50%;
        position:absolute;
        left:50%;
        background: rgb(0, 0, 0);
        background: -moz-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
        background: -webkit-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
        background: -o-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
        background: -ms-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
        background: linear-gradient(0deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);

    }
    </style>
</head>
<body>

    This is a test and a bad one at that.

</body>
</html>

Now if I remove the position:absolute, the gradient works. What am I doing wrong? I need to have that position:absolute, so what can I do?

Edit: tried this in Chrome and Firefox.

Это было полезно?

Решение

If you do not set an html background, body's background is applyed to HTML.

Since body is in absolute, it has a 0 size for HTML and it doesn't trigger anything for HTML layout.

try to apply:html {height:100%;} and see what it does : http://codepen.io/anon/pen/JGApK

Другие советы

that's easy

you just need to add background-attachment: fixed !important; to body and/or height:100% to html.

made a fiddle: http://jsfiddle.net/filever10/NA7a6/

Though either option switches the background from body to html, so it may be a better solution to put the background on html directly, since it's going to go there regardless.

like this: http://jsfiddle.net/filever10/nRLNb/

You can just add position: relative; to the parent element, in your case its the html tag.

html{
  position: relative;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top