Проблема с многослойным фоном (css)

[Krogrim]

Доброго времени суток!
Проблема следующая: фон состоит из нескольких иллюстраций. Две из них расположены слева и справа. Они должны быть прижаты к краям, и разъезжаться в зависимости от размера окна браузера. Реализовал это с помощью двух блоков, оборачивающих страницу, со следующими стилями:

#f_wrapper
{
    background: url(img/left_bg.png) no-repeat;
    background-position: left top;
}
 
#s_wrapper
{
    background: url(img/right_bg.png) no-repeat;
    background-position: right top;
 
}

При разрешение 1280 и больше все выглядит как надо. Но при разрешение 1024, иллюстрации должны оставаться за краями окна (размер контента 960). Как это реализовать никак не доходит.. Может потому что время уже 7 утра и давно пора спать или потому что раньше не сталкивался с такой задачей... Во общем так или иначе, помогите, кто сталкивался с версткой подобного макета.
Для наглядности - скрин на большом разрешение и на 1024 (с этим косячным наездом фона).

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[zek24]

Вариантов несколько, какой именно подойдет сейчас точно не скажу.
1. Задать ширину блокам с иллюстрациями и отступы равные половине контента (для левого блока отступ справа, для правого слева)
2. Поэкспериментировать с float, лефт для левого и райт для правого, добавить отступы (смотри выше) а между ними поместить контент.

 

[Krogrim]

И в итоге получим горизонтальную полосу прокрутки на 1024, не?

 

[Sonic]

В CSS уже заложено использование многослойного фона:

#multi-bg {
    background: url(images/bg1.gif) center center no-repeat, url(images/bg2.gif) top left repeat; /* Firefox, Safari, Chrome */
}
 
#multi-bg {
    background: transparent url(images/bg1.gif) top left repeat;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg2.gif', sizingMethod='crop'); /* IE6-8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg2.gif', sizingMethod='crop')"; /* IE8 */
}

 

[AlexMist]

поиграйся с min-width и overflov: hidden

 

[mdss]

И в итоге получим горизонтальную полосу прокрутки на 1024, не?

overflow-x:hidden для body пропиши

 

[morke]

я бы советовал сделать это через js. в зависимости от разрешения экрана добавлять / удалять класс с беграундом. так проще будет.

 

[Krogrim]

я бы советовал сделать это через js. в зависимости от разрешения экрана добавлять / удалять класс с беграундом. так проще будет.

Так и сделал, подробное решение задачи здесь:

Спойлер

Для просмотра ссылки Войди или Зарегистрируйся

Может кому нибудь в будущем пригодится.