Поддержка старых браузеров
Если необходима поддержка старых браузеров, поэтому вы не можете использовать несколько фонов или градиентов, вы, вероятно, захотите сделать что-то подобное на запасном divэлементе:
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
Пример: http://jsfiddle.net/PLfLW/1704/
Решение использует дополнительный фиксированный div, который заполняет половину экрана. Так как это исправлено, оно останется на месте, даже когда ваши пользователи прокрутят. Возможно, вам придется поэкспериментировать с некоторыми z-индексами позже, чтобы убедиться, что другие ваши элементы находятся выше фонового div, но это не должно быть слишком сложным.
Если у вас есть проблемы, просто убедитесь, что остальная часть вашего контента имеет z-индекс выше, чем фоновый элемент, и вы должны быть готовы.
Современные браузеры
Если новые браузеры - ваша единственная забота, есть пара других методов, которые вы можете использовать:
Линейный градиент:
Это определенно самое простое решение. Вы можете использовать линейный градиент в свойстве background для тела для различных эффектов.
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
Это приводит к жесткому обрезанию на 50% для каждого цвета, поэтому не существует «градиента», как следует из названия. Попробуйте поэкспериментировать с частью стиля «50%», чтобы увидеть различные эффекты, которые вы можете достичь.
Пример: http://jsfiddle.net/v14m59pq/2/
Несколько фонов с размером фона:
Вы можете применить цвет фона к htmlэлементу, а затем применить фоновое изображение к bodyэлементу и использовать background-sizeсвойство, чтобы установить для него 50% ширины страницы. Это приводит к аналогичному эффекту, хотя на самом деле будет использоваться только с градиентами, если вы используете изображение или два.
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;
}
Пример: http://jsfiddle.net/6vhshyxg/2/
EXTRA Примечание: Обратите внимание , что оба htmlи bodyэлементы устанавливаются height: 100%в последних примерах. Это сделано для того, чтобы убедиться, что даже если ваш контент меньше страницы, фон будет иметь высоту, равную высоте окна просмотра пользователя. Без явной высоты фоновый эффект будет уменьшаться только до содержания вашей страницы. Это также просто хорошая практика в целом.
