три колонки на div для разного фона по краям

[severum]

был вариант:

фон:

body {

background-image: url(../img/bg.jpg);

background-repeat: repeat-x;

background-position: center top;

}

сам сайт:

.container {

min-width:900px;

max-width:1600px;

width:100%;

}

т.е. снизу был повторяющийся фон который сочитался с шапкой сайта и если окно становилось шире картинки в шапке то он ее продолжал в обе стороны.

Теперь хочется сделать вариант когда слева и справа шапки должен быть разный повторяющийся фон. направо уходит бесконечный хвост от логотипа например.

3 колонки делаются по примерам так:

.container_main {

position: relative;

width: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

.container_center {

width:90%;

margin: 0px 5% 0px 5%;

}

.container_left {

position: absolute;

top: 0px;

left: 0px;

width: 5%;

margin: 0px;

background-image: url(../img/bg_left.jpg);

background-repeat: repeat-x;

background-position: center top;

}

.container_right {

position: absolute;

top: 0px;

right: 0px;

width: 5%;

margin: 0px;

background-image: url(../img/bg_right.jpg);

background-repeat: repeat-x;

background-position: center top;

}

Но если окно уже ширины шапки то (container_left и container_right) колонки должны быть 0 в ширину, а container_center во всю ширину окна.

Если ширина окна больше шапки то container_center должен быть равен ширине шапки а увеличиваться должны только (container_left и container_right)

Это возможно?

Спасибо

[psywalker]

Так, покажи лучше на примере скрина, чё ты хочешь получить с подробным объяснением

[severum]

вариант1

вариант2

черная рамочка с надписью это картинка положеная как фон на блок шапки (сверху всякий текст, меню и т.д.)

синяя рамочка минимальный размер экрана. картинка при этом не помещается/режется. Прокрутка не появляется (min-width:900px;).

стрелочки символизируют растягивание окна браузера в ширину.

шапка остается в центре окна не меняя своих размеров. сначала появляются края картинки, а потом крайние колонки.

в варианте1 на body положена зеленая картинка background-image: url(../img/bg.jpg); вертикальный столбик с background-repeat: repeat-x;

в варианте 2 так не прокатит.

я пока сделал вариант 1 и в качестве фоновой картинку у которой слева "красный" и справа "зеленый". тока чтобы это точно работало на любом мониторе она по горизонтали 2048 пикселей )

[psywalker]

Аа, я так понял ты хочешь, чтобы изначально был первый вариант(когда экран сужен), а потом при растягвании фон как бы тоже растягивался в разные стороны, слева в красный, а справа зелёный?

[severum]

мм... тоже не совсем понял )

я хочу вариант2.

но понимаю только как сделать первый.

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

и чтобы поведение этой конструкции было таким же как и в варианте1.

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

ps спасибо за участие.

Edited December 28, 2009 by severum

[voooodoo]

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

[DjTarik]

На абсолюте 2 дива по 50%.

Потом сверху еще один див с 1000px по центру

В нём контент. Вроде все.

[psywalker]

Тс, а ещё за идею можешь взять вот это вариант.

http://psywalker.ru/Forum/Column/Column_1400px3.html

[severum]

Всем спасибо.

Последний пример показывет действительно то что надо.