Сделать правый и левый задний фон разными цветами?

Question

[issssrt]

Собственно есть макет фикс 1000px, задний фон заполняет все пространство.
Проблема в том что у шапки слева фон белый а справа синий.
Посоветуйте как можно решить эту задачу?

Answer 1

[Александр Миранович]

не ту ссылку поставил вот что вам надо jsfiddle.net/f48ZD/112

Answer 2

[Trow_eu]

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

body {
background: linear-gradient(to right, #fff 50%, #00f 50%);
}

Comments

[Ивор Барханский]

Только что проверил - стык совершенно не смазан.

Answer 3

[Artem Kom]

Может я что-то не понял из описания, но в чем проблема в шапке сделать два дива с соответсвующими цветами?

Answer 4

[Pavel Yakovlev]

картинки,дивы

Answer 5

[Ивор Барханский]

Если ширина строго фиксирована, то двухцветная гифка 1000*1 пикс будет самым простым, железным решением, которому еще будет и плевать с колокольни на совместимость браузеров.

Comments

[issssrt]

gyazo.com/8a1e13360a5cdae0b07be95947321836
Вот что я имею ввиду. Слева белый фон, справа синий продалжается

[Ивор Барханский]

issssrt: Окей, так чем то что я написал не подходит?

[issssrt]

Игорь Б: не совсем понял ваше решение

[Ивор Барханский]

issssrt: У вас есть контейнер, у которого фиксированная ширина - 1000 пикселей, так? Рисуете в фотошопе двухцветную gif-картинку разрешением 1000 пикселей в ширину и 1 пиксель в высоту. Левую половину красите в один цвет, правую - в другой. Берёте готовую картинку и цепляете заливкой в контейнер. Логично предположить, что картинка ровненько зальёт контейнер двумя цветами.

[issssrt]

Контейнер 1000px трогать вообще не нужно, с ним проблем нет. проблема в том что нужно залить синим цветом все справа за пределами контейнера

[Ивор Барханский]

issssrt: ой. Я в корне не так понял суть задачи. Но тем не менее. Берёте картинку и растягиваете её на всю длину и ширину средствами css. Стык будет где-то под контейнером и не будет виден. Или используйте вариант от Александр Миранович.

[Александр Миранович]

issssrt: так вам в этом случае, как раз подходит решение то что я предложил,
контейнеру, в котором находится данная картинка даете position: relative; и через :after { content: ''; position: absolute; width: 100%; height: 100%; left: 50%; margin: 0 0 0 500px; background: blue; }

[issssrt]

да так и поступил, спасибо