1

Scenario

I'm trying to make a linear-gradient of one body, but it is split in 2? Im confused..

CSS:

/* Custom properties */
body {
    background: linear-gradient(rgb(53, 53, 255), rgb(248, 117, 139));

}

HTML (removed a bits of code, to make it neater)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index.css">
        
    </head>
    <body>
    </body>
</html>
Ralic
  • 13
  • 2
  • 1
    It's not split in two, it's repeated ([background-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat)) – DBS Feb 07 '22 at 09:59
  • 1
    `body` is only as high as your content requires, and below that, the image gets repeated. Apply it to `html` instead in the first place, or give `body` and appropriate `min-height`. – CBroe Feb 07 '22 at 10:00
  • min-height:100% to html – Temani Afif Feb 07 '22 at 10:19
  • 1
    @CBroe applying it to html will give the same result. Actually the background is propagated to the html and then to the canvas (html is also as high as the content) – Temani Afif Feb 07 '22 at 10:20

1 Answers1

0

As CBroe says, define a height for the body:

body {
  background: linear-gradient(rgb(53, 53, 255), rgb(248, 117, 139));
  height: 100vh;
}
<body>
</body>
Arman Ebrahimi
  • 2,035
  • 2
  • 7
  • 20