Prise en charge des anciens navigateurs
Si la prise en charge d'anciens navigateurs est indispensable, de sorte que vous ne pouvez pas utiliser plusieurs arrière-plans ou dégradés, vous voudrez probablement faire quelque chose comme ça sur un divélément de rechange :
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
Exemple: http://jsfiddle.net/PLfLW/1704/
La solution utilise un div fixe supplémentaire qui remplit la moitié de l'écran. Comme il est corrigé, il restera en place même lorsque vos utilisateurs font défiler. Vous devrez peut-être manipuler certains z-index plus tard, pour vous assurer que vos autres éléments sont au-dessus du div d'arrière-plan, mais cela ne devrait pas être trop complexe.
Si vous rencontrez des problèmes, assurez-vous simplement que le reste de votre contenu a un z-index supérieur à l'élément d'arrière-plan et vous devriez être prêt à partir.
Navigateurs modernes
Si les navigateurs plus récents sont votre seule préoccupation, il existe deux autres méthodes que vous pouvez utiliser:
Gradient linéaire:
C'est certainement la solution la plus simple. Vous pouvez utiliser un dégradé linéaire dans la propriété background du corps pour une variété d'effets.
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
Cela provoque une coupure ferme à 50% pour chaque couleur, il n'y a donc pas de "dégradé" comme son nom l'indique. Essayez de tester l'élément "50%" du style pour voir les différents effets que vous pouvez obtenir.
Exemple: http://jsfiddle.net/v14m59pq/2/
Plusieurs arrière-plans avec la taille de l'arrière-plan:
Vous pouvez appliquer une couleur d'arrière-plan à l' htmlélément, puis appliquer une image d'arrière-plan à l' bodyélément et utiliser la background-sizepropriété pour le définir à 50% de la largeur de la page. Cela se traduit par un effet similaire, mais ne serait vraiment utilisé que sur des dégradés si vous utilisez une image ou deux.
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;
}
Exemple: http://jsfiddle.net/6vhshyxg/2/
REMARQUE SUPPLÉMENTAIRE: Notez que les éléments htmlet bodysont définis sur height: 100%les derniers exemples. Ceci permet de s'assurer que même si votre contenu est plus petit que la page, l'arrière-plan sera au moins la hauteur de la fenêtre de l'utilisateur. Sans la hauteur explicite, l'effet d'arrière-plan ne descendra que jusqu'au contenu de votre page. C'est aussi juste une bonne pratique en général.
