Фон на всей ширине, а контент только в container как?

Question

[Илья]

Есть обычная сетка bootstrap: .container>.row>.col*2
Нужно расположить 2 фона так что бы они совпадали в шапке и в основной части:

1. Так что бы он бы он начинался в левом углу экрана и заканчивался на конце .col-9
   
2. Так что бы начинался в начале .col-3 и заканчивался в правом углу экрана
   

Вот так:


Ширина естественно не фиксированная для .col
Помогите пожалуйста, буду очень благодарен любой помощи.

Answer 1

[Михаил Иванов]

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

Comments

[archelon]

ну да, так проще всего.
еще можно с псевдоэлементами поэкспериментировать.

[Илья]

Можно пример пожалуйста, не очень понял как вы предлагаете.

[Илья]

archelon, а как псевдоэлементы выравнивать та? Там либо по краю .col, либо по краю экрана и то и то в месте не получаеться