Suporte a navegadores antigos
Se o suporte a navegadores mais antigos é obrigatório, então você não pode usar vários planos de fundo ou gradientes, provavelmente vai querer fazer algo assim em um divelemento sobressalente :
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
Exemplo: http://jsfiddle.net/PLfLW/1704/
A solução usa uma div extra fixa que preenche metade da tela. Como é fixo, ele permanecerá na posição mesmo quando os usuários rolarem. Você pode ter que mexer com alguns índices z depois, para garantir que seus outros elementos estejam acima da div de segundo plano, mas não deve ser muito complexo.
Se você tiver problemas, verifique se o restante do conteúdo tem um índice z maior que o elemento background e você deve estar pronto.
Navegadores modernos
Se os navegadores mais recentes são sua única preocupação, existem alguns outros métodos que você pode usar:
Gradiente linear:
Esta é definitivamente a solução mais fácil. Você pode usar um gradiente linear na propriedade background do corpo para uma variedade de efeitos.
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
Isso causa um corte rígido de 50% para cada cor, portanto, não há um "gradiente" como o nome indica. Tente experimentar a peça "50%" do estilo para ver os diferentes efeitos que você pode alcançar.
Exemplo: http://jsfiddle.net/v14m59pq/2/
Vários fundos com tamanho de fundo:
Você pode aplicar uma cor de plano de fundo ao htmlelemento e, em seguida, aplicar uma imagem de plano de fundo ao bodyelemento e usar a background-sizepropriedade para defini-la como 50% da largura da página. Isso resulta em um efeito semelhante, mas só seria realmente usado em gradientes se você estiver usando uma imagem ou duas.
html {
height: 100%;
background-color: cyan;
}
body {
height: 100%;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;
}
Exemplo: http://jsfiddle.net/6vhshyxg/2/
NOTA EXTRA: Observe que os elementos htmle bodysão definidos height: 100%nos últimos exemplos. Isso é para garantir que, mesmo que seu conteúdo seja menor que a página, o plano de fundo seja pelo menos a altura da janela de exibição do usuário. Sem a altura explícita, o efeito de plano de fundo será reduzido apenas no conteúdo da página. Também é apenas uma boa prática em geral.
