Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

background-color X background: linear-gradiente

Referente ao curso HTML5 e CSS3 parte 1: crie uma página da Web, no capítulo Trabalhando com CSS e atividade Mudando a cor

por William Ferreira Souza
| 25.9k xp | 4 posts

Ao colocar o seguinte código na tag body do CSS

body {
    background-color: #CCCCCC;}

A tela fica toda cinza, assim como deve ser.

Mas ao colocar também da tag body do CSS o seguinte código

body {
    background: linear-gradient(#CCCCCC, #FFFFFF);}

para ir do cinza ao branco em toda a página como uma imagem só, isso não acontece.

o navegador está repetindo esse plano de fundo pouco mais de 3 vezes na tela.

Como resolver isso para que o plano de fundo preencha toda a tela como uma imagem só também no linear-gradiente?

3 respostas
por Guilherme Vitorino da Silva
| 244k xp | 125 posts

Olá William,

Para definir o background da maneira quer você que você deve incluir o termo no-repeat da definição do css, para que o gradiente não seja repetido como está acontecendo.

body {
  background: linear-gradient(#CCCCCC, #FFFFFF) no-repeat;
}
por William Ferreira Souza
| 25.9k xp | 4 posts

Olá Guilherme.

Eu até já tinha tentado o no-repeat, mas se vc for ver quando coloca o no-repeat o plano de fundo ocupa apenas uma parte da tela e não toda a tela.

solução!
por Guilherme Vitorino da Silva
| 244k xp | 125 posts

William,

Faça o seguinte teste:

-Salve o código abaixo em um arquivo html e abra em seu navegador.

<html>

<body>
  <div>
    <h1>Test background</h1>
  </div>
</body>

</html>

<style>
  body {
    background: linear-gradient(#CCCCCC, #FFFFFF) no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
  }
</style>