Background gradient se repetindo

Question

estou montando um site para mim, e já defini as estruturas do site (header, section, aside, footer).

No entanto, estou querendo colocar um plano de fundo gradiente no site inteiro.
Então eu apliquei no css:

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

Quando salvo e vejo o site, aplicou o gradiente no site inteiro, porém o degradê começa e termina em cada limite das estruturas, fica um degradê pra header, um outro pra section, um outro pro footer, etc...

E não é isso que eu quero, eu quero o mesmo gradient para o site inteiro.
Alguém sabe o que há de errado, ou o que eu preciso colocar?

Thiago Ferreira · Answer

CSS é um pouco frustrante. Mas, vou lhe ensinar da forma correta como resolver esse problema.
Isso acontece porquê você não determinou uma largura e altura para o seu documento.
Para isso, use o código abaixo:
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

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

anonimato sempre · Answer

usa "fixed" antes do ";"

Exemplo:
background: linear-gradient(to bottom, ..., ...) fixed;

Mateus Knob · Answer

Acredito que o código abaixo resulte a saída esperada:

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

Matheus Martins · Answer

Use a propriedade no-repeat para que o background não se repita:

background-repeat: no-repeat;

Caso tenha mais dúvidas, recomendo o site: http://maujor.com/tutorial/propriedade-css-para-estilizacao-de-background.php

Background gradient se repetindo

4 Answers

Add your own answers!

Ask a Question