Supporto per browser meno recenti
Se il supporto del browser precedente è un must, quindi non puoi andare con più sfondi o gradienti, probabilmente vorrai fare qualcosa del genere su un divelemento di riserva :
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
Esempio: http://jsfiddle.net/PLfLW/1704/
La soluzione utilizza un div fisso aggiuntivo che riempie metà dello schermo. Poiché è stato risolto, rimarrà in posizione anche quando gli utenti scorrono. Potrebbe essere necessario armeggiare con alcuni indici z in seguito, per assicurarsi che gli altri elementi siano sopra il div dello sfondo, ma non dovrebbe essere troppo complesso.
Se hai problemi, assicurati solo che il resto dei tuoi contenuti abbia un indice z più alto dell'elemento di sfondo e dovresti andare bene.
Browser moderni
Se i nuovi browser sono la tua unica preoccupazione, ci sono un paio di altri metodi che puoi usare:
Gradiente lineare:
Questa è sicuramente la soluzione più semplice. Puoi usare un gradiente lineare nella proprietà di sfondo del corpo per una varietà di effetti.
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
Questo provoca un taglio al 50% per ogni colore, quindi non c'è un "gradiente" come suggerisce il nome. Prova a sperimentare il pezzo "50%" dello stile per vedere i diversi effetti che puoi ottenere.
Esempio: http://jsfiddle.net/v14m59pq/2/
Sfondi multipli con dimensioni dello sfondo:
È possibile applicare un colore di sfondo htmlall'elemento, quindi applicare un'immagine di sfondo bodyall'elemento e utilizzare la background-sizeproprietà per impostarlo sul 50% della larghezza della pagina. Ciò si traduce in un effetto simile, anche se in realtà verrebbe utilizzato solo su pendenze se si utilizza un'immagine o due.
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;
}
Esempio: http://jsfiddle.net/6vhshyxg/2/
NOTA SUPPLEMENTARE: si noti che entrambi gli elementi htmle bodysono impostati su height: 100%negli ultimi esempi. Questo per assicurarsi che anche se il contenuto è più piccolo della pagina, lo sfondo sarà almeno l'altezza della finestra dell'utente. Senza l'altezza esplicita, l'effetto di sfondo diminuirà solo fino al contenuto della pagina. È anche solo una buona pratica in generale.
