Obsługa starszych przeglądarek
Jeśli obsługa starszych przeglądarek jest koniecznością, więc nie możesz przejść z wieloma tłami lub gradientami, prawdopodobnie będziesz chciał zrobić coś takiego na wolnym divelemencie:
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
Przykład: http://jsfiddle.net/PLfLW/1704/
Rozwiązanie wykorzystuje dodatkowy stały element div, który wypełnia połowę ekranu. Ponieważ jest naprawiony, pozostanie na miejscu nawet podczas przewijania przez użytkowników. Być może będziesz musiał później majstrować przy niektórych indeksach Z, aby upewnić się, że inne elementy znajdują się powyżej elementu div tła, ale nie powinno to być zbyt skomplikowane.
Jeśli masz problemy, po prostu upewnij się, że reszta treści ma indeks Z wyższy niż element tła i powinieneś być gotowy.
Nowoczesne przeglądarki
Jeśli zależy Ci tylko na nowszych przeglądarkach, możesz skorzystać z kilku innych metod:
Gradient liniowy:
To zdecydowanie najłatwiejsze rozwiązanie. Możesz użyć gradientu liniowego we właściwości background ciała, aby uzyskać różne efekty.
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
Powoduje to twarde odcięcie na poziomie 50% dla każdego koloru, więc nie ma „gradientu”, jak sugeruje nazwa. Spróbuj poeksperymentować z „50%” elementem stylu, aby zobaczyć różne efekty, które możesz osiągnąć.
Przykład: http://jsfiddle.net/v14m59pq/2/
Wiele tła z rozmiarem tła:
Możesz zastosować kolor tła do htmlelementu, a następnie zastosować obraz tła do bodyelementu i użyć background-sizewłaściwości, aby ustawić go na 50% szerokości strony. Daje to podobny efekt, chociaż tak naprawdę będzie używany tylko w przypadku gradientów, jeśli używasz jednego lub dwóch obrazów.
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;
}
Przykład: http://jsfiddle.net/6vhshyxg/2/
DODATKOWA UWAGA: Zauważ, że oba elementy htmli bodysą ustawione na height: 100%w ostatnich przykładach. Ma to na celu upewnienie się, że nawet jeśli treść jest mniejsza niż strona, tło będzie miało co najmniej wysokość obszaru roboczego użytkownika. Bez wyraźnej wysokości efekt tła spadnie tylko do zawartości strony. To także ogólnie dobra praktyka.
