Estou tentando adicionar um gradiente ao meu plano de fundo usando CSS. Quero que esse gradiente não seja 'fixo', mas role com a página. Para páginas muito altas, quero apenas que o gradiente termine.
Este é o meu CSS:
body {
min-height: 100%;
background-color: #F00;
background-repeat: no-repeat;
background: linear-gradient(
180deg,
#F00 0px,
#0F0,
#00F,
#F00 3000px
)
}
O problema é que quando eu rolar para baixo, após a dobra da página o gradiente recomeça. Na minha tela de altura de 1200px, ela nunca fica azul.
Meu objetivo é que o gradiente seja renderizado uma vez e se a página for maior que o gradiente (digamos 3000px), seja para sempre #F00
. Não repetir não teve efeito.
Você pode definir a imagem de fundo e a cor de fundo separadamente.
Seu código estava bom, mas você está enfrentando a propagação em segundo plano para o elemento html. Adicione qualquer cor de fundo ao html para corrigir isso e você não precisa definir
background-repeat
oubackground-size
oubackground-color
no elemento body