Резиновое фоновое изображения для двух масштабируемых колонок, CSS

Допустим, у вас есть макет, состоящий из двух колонок. Макет должен подстраиваться под любые мониторы, причем колонки должны иметь разный цвет и растягиваться на всю высоту страницы. Ваши колонки имеют следующие пропорции относительно блока-родителя (или, скорее, окна просмотра браузера, если блок-родитель это body или html): 34% - левая колонка, 66% - правая колонка. То, что нам нужно мы выяснили, далее на примере простого html/css решения вы увидите, как это реализуется.

Первое. Создайте в фотошопе или любом другом графическом редакторе изображение длиной, например, 3000px (создаем с запасом для больших мониторов) и высотой в 1px. 66% от 3000 px это 1980px, следовательно, точка перехода, которая делит изображение в нужных нам пропорциях равно 1980px. Итак, поделите изображение на две колонки через рассчитанную точку перехода и залейте колонки разным цветом.

Второе. Осталось совсем немного. Создайте следующее стилевое правило для элемента-родителя. Этим вы заставите всегда правильно позиционировать фоновое изображение относительно левой и правой колонки. То есть ваши колонки будут всегда пропорционально отображаться при любых размерах окна просмотра устройства.

CSS

          .base {

                background: url('../images/background_repeat.png') 66% 0 repeat-y;

            }