Background gradient repeating itself

Question

I’m setting up a website for myself, and I’ve defined the site structures (header, Section, aside, footer).

However, I am willing to put a gradient background on the entire site. So I applied it to css:

body { background: linear-gradient(rgba(0,0,0,0.87), rgba(0,0,0,1)); }

When saved and I see the site, applied the gradient to the entire site, but the gradient starts and ends at each structure limit, is a gradient for header, another for Ction, another pro footer, etc...

And that’s not what I want, I want the same gradient for the entire site. Does anyone know what’s wrong, or what I need to put?

Answer 1

CSS is a little frustrating. But I’ll teach you the right way to solve this problem. This happens because you have not determined a width and height for your document. For this, use the code below:

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-image: linear-gradient(to top, red, black);
        width: 100vw;
        height: 100vh;
    }

Answer 2

Use the no-repeat property to prevent the background from repeating:

  background-repeat: no-repeat;

If you have more questions, recommend the site: http://maujor.com/tutorial/propriedade-css-para-estilizacao-de-background.php

Answer 3

I believe the code below results in the expected output:

background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), to(rgba(0,0,0,1))) fixed;

Answer 4

uses "Fixed" before the ";"

Example: background: linear-gradient(to bottom, ..., ...) Fixed;