Question 209907 in Html Question posted in
Some basic documentation can be found here.

Html – Why is my linear-background acting like this?

I literally wrote one line of code to style my background and it doesn’t work. My background is supposed to be a liner-gradient going from the top left to the bottom right. It does do this but has rows of red in blue in between each other going down. enter image description hereI used the colors red and blue. Can someone please help me?

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
</head>
<body>
    <div></div>
</body>
</html>

CSS

body {
    background-image: linear-gradient(to top right, red, blue);
}
Tags:

2

Answers


  1. 0

    Here is the solution:

    body {
  background: linear-gradient(to top right, red, blue);
  min-height: 100vh;
  color: #fff;
}
    <div>Linear Gradient Background</div>
    Login or Signup to reply.
  2. 0

    because the default height of the body is zero and your making the gradient go to the top its repeated many times until it fills the whole body that’s why if you removed the ‘top’ it will work fine because the body default width is almost 100% it looks fine
    how to solve this

    body {
height: 100vh;
background-image: linear-gradient(to top right, red, blue);
}

    this should work just fine

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search