Ответ 1

Поддержка старых браузеров

Если поддержка более старых браузеров является обязательной, поэтому вы не можете использовать несколько фонов или градиентов, возможно, вы захотите сделать что-то подобное с запасным элементом 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/

ДОПОЛНИТЕЛЬНОЕ ПРИМЕЧАНИЕ: Обратите внимание, что элементы html и body установлены в height: 100% в последних примерах. Это сделано для того, чтобы убедиться, что даже если ваш контент меньше страницы, фон будет иметь высоту, равную высоте окна просмотра пользователя. Без явной высоты фоновый эффект будет уменьшаться только до содержания вашей страницы. Это также просто хорошая практика в целом.

Ответ 2

Простое решение для достижения "разделения на два" фона:

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

Вы также можете использовать градусы как направление

background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);

Ответ 3

Вы можете сделать жесткое различие вместо линейного градиента, поставив второй цвет на 0%

Например,

Градиент - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

Жесткое различие - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Ответ 4

это должно работать с чистым css.

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));

тестируется только в Chrome.

Ответ 5

Итак, это ужасно старый вопрос, на который уже есть принятый ответ, но я считаю, что этот ответ был бы выбран, если бы он был опубликован четыре года назад.

Я решил это исключительно с помощью CSS и без дополнительных элементов DOM! Это означает, что два цвета - это просто фоновые цвета ОДНОГО ЭЛЕМЕНТА, а не фоновые цвета двух.

Я использовал градиент и, поскольку я установил цветовые остановки так близко друг к другу, похоже, что цвета различны и что они не смешиваются.

Вот градиент в собственном синтаксисе:

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

Цвет #74ABDD начинается с 0% и по-прежнему #74ABDD с 49.9%.

Затем я заставляю градиент сместиться к следующему цвету в пределах 0.2% высоты элементов, создавая очень сплошную линию между двумя цветами.

Вот результат:

И здесь мой JSFiddle!

Веселиться!

Ответ 6

В прошлом проекте, который должен был поддерживать IE8+, я достиг этого, используя изображение, закодированное в формате data-url.

Изображение было 2800x1px, половина изображения белая, а половина прозрачная. Работал довольно хорошо.

body {
    /* 50% right white */
    background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;

   /* 50% left white */
   background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}

Вы можете увидеть, как он работает здесь JsFiddle. Надеюсь, это может кому-то помочь;)

Ответ 7

Я использовал :after и работает во всех основных браузерах. проверьте ссылку. просто нужно внимательно следить за z-индексом, поскольку после этого позиция абсолютна.

<div class="splitBg">
    <div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
        </div>
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
        </div>
        <div style="clear:both;"></div>
    </div>
</div>`
css

    .splitBg{
        background-color:#666;
        position:relative;
        overflow:hidden;
        }
    .splitBg:after{
        width:50%;
        position:absolute;
        right:0;
        top:0;
        content:"";
        display:block;
        height:100%;
        background-color:#06F;
        z-index:1;
        }

ссылка на скрипку

Ответ 8

Использование на вашем изображении bg

Вертикальный раскол

background-size: 50% 100%

Горизонтальное разделение

background-size: 100% 50%

Пример

.class {
   background-image: url("");
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: 50% 100%;
}

Ответ 9

Вы можете использовать псевдо-селектор :after для достижения этого, хотя я не уверен в обратной совместимости этого селектора.

body {
    background: #000000
}
body:after {
    content:'';
    position: fixed;
    height: 100%;
    width: 50%;
    left: 50%;
    background: #116699
}

Я использовал это, чтобы иметь два разных градиента на фоне страницы.

Ответ 10

Один из способов реализовать вашу проблему для ввода одной отдельной строки внутри вашего div:

background-image: linear-gradient(90deg, black 50%, blue 50%);

Вот демонстрационный код и дополнительные параметры (горизонтальный, диагональный и т.д.), вы можете нажать "Выполнить фрагмент кода", чтобы увидеть его вживую.

.abWhiteAndBlack
{
  background-image: linear-gradient(90deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack2
{
  background-image: linear-gradient(180deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack3
{
  background-image: linear-gradient(45deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

Vertical:

  <div class="abWhiteAndBlack">
  </div>


Horizonal:

  <div class="abWhiteAndBlack2">
    
  </div>


Diagonal:

  <div class="abWhiteAndBlack3">
    
  </div>

Ответ 11

Наиболее пуленепробиваемым и семантически правильным вариантом будет использование псевдоэлемента с фиксированным положением (::after или ::before). Используя эту технику, не забудьте установить z-index на элементы внутри контейнера. Также помните, что правило content:"" для псевдоэлемента необходимо, иначе оно не будет визуализировано.

#container {...}

#content::before {
    content:"";
    background-color: #999;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;    
    width: 50%; 
    z-index: 1;
}


#content * {
  position: relative;
  z-index:2;
}

Пример из жизни:https://jsfiddle.net/xraymutation/pwz7t6we/16/

Ответ 12

Это пример, который будет работать в большинстве браузеров.
В основном вы используете два цвета фона, первый из которых начинается с 0% и заканчивается на 50%, а второй - с 51% и заканчивается на 100%

Я использую горизонтальную ориентацию:

background: #000000;
background: -moz-linear-gradient(left,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );

Для разных настроек вы можете использовать http://www.colorzilla.com/gradient-editor/

Ответ 13

.background{
 background: -webkit-linear-gradient(top, #2897e0 40%, #F1F1F1 40%);
 height:200px;
 
}

.background2{
  background: -webkit-linear-gradient(right, #2897e0 50%, #28e09c 50%);

 height:200px;
 
}

<html>
<body class="one">

<div class="background">
</div>
<div class="background2">
</div>
</body>
</html>