Намагання досягти фону на сторінці, яка "розділена на два"; два кольори на протилежних сторонах ( по- видимому робиться шляхом установки по замовчуванням background-colorна bodyмітці, то , застосовуючи інший на а , divяка простягається на всю ширину вікна).

Я придумав рішення, але, на жаль, background-sizeмайно не працює в IE7 / 8, що є необхідним для цього проекту -

body { background: #fff; }
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

Оскільки мова йде лише про суцільні кольори, можливо, є спосіб використовувати лише звичайну background-colorвластивість?

Старіша підтримка браузера

Якщо підтримка старшого веб-переглядача є обов'язковою, тому ви не можете перейти з декількома фонами або градієнтами, ви, ймовірно, захочете зробити щось подібне на запасному divелементі:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

Приклад: http://jsfiddle.net/PLfLW/1704/

У рішенні використовується додатковий фіксований div, який заповнює половину екрана. Оскільки це зафіксовано, він залишатиметься в положенні навіть тоді, коли ваші користувачі прокручують. Можливо, вам доведеться пізніше поспілкуватися з деякими z-індексами, щоб переконатися, що ваші інші елементи знаходяться над фоновим поділом, але це не повинно бути занадто складним.

Якщо у вас є проблеми, просто переконайтеся, що в решті вмісту z-індекс вищий, ніж у фонового елемента, і вам слід погодитися.

Сучасні браузери

Якщо нові веб-переглядачі є вашою проблемою, є кілька інших методів, якими ви можете скористатися:

Лінійний градієнт:

Це, безумовно, найпростіше рішення. Ви можете використовувати лінійний градієнт у фоновій властивості тіла для різних ефектів.

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%. Це робиться для того, щоб навіть якщо ваш вміст менше сторінки, фон буде не менше висоти вікна перегляду користувача. Без явної висоти фоновий ефект знизиться лише на вміст сторінки. Це також просто хороша практика взагалі.

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

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

Ви також можете використовувати градуси в якості напрямку

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

Ви можете зробити чітке розмежування замість лінійного градієнта, додавши другий колір до 0%

Наприклад,

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

Важке розмежування - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Отже, це жахливо старе питання, на яке вже є прийнята відповідь, але я вважаю, що ця відповідь була б обрана, якби вона була розміщена чотири роки тому.

Я вирішив це суто за допомогою CSS та без ЕКСТРУЮЧИХ ДОМ ЕЛЕМЕНТІВ! Це означає, що два кольори - це суто те, що лише кольори фону ОДИН ЕЛЕМЕНТ, а не кольори тла двох.

Я використовував градієнт, і оскільки я встановив, що кольори так близько зближуються, виглядає так, ніби кольори виразні і не змішуються.

Ось градієнт у власному синтаксисі:

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

Колір #74ABDDпочинається 0%і до сих пір #74ABDDв 49.9%.

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

Ось результат:

І ось мій JSFiddle!

Веселіться!

це має працювати з чистим css.

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

перевірено лише в Chrome.

У минулому проекті, який повинен був підтримувати IE8 +, і я досяг цього, використовуючи зображення, закодовані у форматі 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 . Сподіваюся, це може комусь допомогти;)

Я використовував, :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;
        }

скрипка посилання

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

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

Я використав це для отримання двох різних градієнтів на фоні сторінки.

Використовуйте на своєму зображенні bg

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

background-size: 50% 100%

Горизонтальний розкол

background-size: 100% 50%

Приклад

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

Один із способів реалізувати проблему, щоб ввести один рядок всередині вашого 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>

Найбільш вірогідним і семантично правильним варіантом буде використання псевдоелемента з фіксованим розміщенням ( ::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/

Це приклад, який буде працювати в більшості браузерів.
В основному ви використовуєте два кольори фону, перший починається з 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/

якщо ви хочете використовувати linear-gradientз 50% висоти:

background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;