Unterstützung für ältere Browser
Wenn die Unterstützung älterer Browser ein Muss ist, sodass Sie nicht mit mehreren Hintergründen oder Verläufen arbeiten können, möchten Sie wahrscheinlich Folgendes für ein Ersatzelement tun div:
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
Beispiel: http://jsfiddle.net/PLfLW/1704/
Die Lösung verwendet ein zusätzliches festes Div, das den halben Bildschirm ausfüllt. Da es behoben ist, bleibt es in Position, auch wenn Ihre Benutzer scrollen. Möglicherweise müssen Sie später mit einigen Z-Indizes herumspielen, um sicherzustellen, dass sich Ihre anderen Elemente über dem Hintergrund-Div befinden, aber es sollte nicht zu komplex sein.
Wenn Sie Probleme haben, stellen Sie einfach sicher, dass der Rest Ihres Inhalts einen höheren Z-Index als das Hintergrundelement hat, und Sie sollten bereit sein.
Moderne Browser
Wenn neuere Browser Ihr einziges Problem sind, können Sie einige andere Methoden verwenden:
Linearer Gradient:
Dies ist definitiv die einfachste Lösung. Sie können einen linearen Farbverlauf in der Hintergrundeigenschaft des Körpers für eine Vielzahl von Effekten verwenden.
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
Dies führt zu einem harten Cutoff von 50% für jede Farbe, sodass es keinen "Farbverlauf" gibt, wie der Name schon sagt. Versuchen Sie, mit dem Teil "50%" des Stils zu experimentieren, um die verschiedenen Effekte zu sehen, die Sie erzielen können.
Beispiel: http://jsfiddle.net/v14m59pq/2/
Mehrere Hintergründe mit Hintergrundgröße:
Sie können eine Hintergrundfarbe auf das htmlElement anwenden, dann ein Hintergrundbild auf das bodyElement anwenden und die background-sizeEigenschaft verwenden, um es auf 50% der Seitenbreite festzulegen. Dies führt zu einem ähnlichen Effekt, der jedoch nur dann über Farbverläufe verwendet wird, wenn Sie zufällig ein oder zwei Bilder verwenden.
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;
}
Beispiel: http://jsfiddle.net/6vhshyxg/2/
ZUSÄTZLICHER HINWEIS: Beachten Sie, dass in den letzteren Beispielen sowohl das htmlals auch das bodyElement festgelegt sind height: 100%. Dies soll sicherstellen, dass der Hintergrund, selbst wenn Ihr Inhalt kleiner als die Seite ist, mindestens der Höhe des Ansichtsfensters des Benutzers entspricht. Ohne die explizite Höhe wird der Hintergrundeffekt nur bis zum Seiteninhalt verringert. Es ist auch nur eine gute Praxis im Allgemeinen.
