2

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?

1
  • Não era pra acontecer isso não. Só daria pra saber o que está acontecendo de víssemos o código todo. Pode estar acontecendo algum conflito no CSS.
    – Sam
    Commented 7/11/2017 às 19:06

4 Respostas 4

1

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;
    }
0

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;
1
  • Opa, não entendi nada deste código, mas funcionou kkk Muito obrigado! Deixou até um efeito legal kk
    – user96296
    Commented 7/11/2017 às 19:27
0

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

1
  • Não funcionou :( Continua repetindo na section, footer, etc..
    – user96296
    Commented 7/11/2017 às 19:04
-2

usa "fixed" antes do ";"

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

Você deve fazer log-in para responder a esta pergunta.