linear-gradient() forming dashed lines

Question

I'm opening an HTML file with no content, just the full html skeleton. i styled the html by using this linear-gradient

body {
    background: linear-gradient(#e66465, #9198e5);

instead of getting this expected outcome

I get this instead.

This example comes from https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

it works, but i dont understand why not one single tutorial has mentioned this or why it happens in the first place. Tomorrow I will have to learn this even more. — Lazaro, Nov 23 '19 at 03:57
@Lazaro check the duplicate and you will get the detailed explanation — Temani Afif, Nov 23 '19 at 13:36

Veneseme Tyras · Answer 1 · 2019-11-23T04:53:59.423

So what happens here is that the <html> element is just special. It is the height of the viewport, because it has to be, and it defaults to overflow:auto;. and yet, it's height is not explicitly defined, it is granted by the browser. So the gradient doesn't know where to get it's height value, and goes insane.

body {
  background: linear-gradient(#e66465, #9198e5);
}

If we give the <html> element an explicit height, then all is fine. In fact not giving the <html> element a height of 100% tends to be the cause of many issues, that are all fixed by giving <html> a height. min-height: 100%; will work as well.

html {
  height: 100%;
}
body {
  background-image: linear-gradient(#e66465, #9198e5);
}

You could alternatively give the gradient itself a height of 100vh.

body {
  background-image: linear-gradient(#e66465, #9198e5);
  background-size: 100% 100vh;
}

score -1 · Answer 2 · answered Nov 23 '19 at 03:56

-1

As mentioned in CSS3 gradient background on body

html{
 height:100%
}
body{
 width:100px;
 height:100px;
 background:linear-gradient(red, black);
 background-repeat:no-repeat;
 height:100%
}

Hope this helps!

answered Nov 23 '19 at 03:56

Shuaib Khan

119
4

score -1 · Answer 3 · answered Nov 23 '19 at 05:21

-1

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: linear-gradient(#e66465, #9198e5);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Linear gradient background</title>
</head>

<body>

</body>

</html>

answered Nov 23 '19 at 05:21

Jay Ukani

362
4
13

linear-gradient() forming dashed lines

3 Answers3