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

Тема в разделе "Верстка", создана пользователем Krogrim, 17 мар 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. Krogrim

    Krogrim Создатель

    Регистр.:
    10 мар 2012
    Сообщения:
    23
    Симпатии:
    6
    Доброго времени суток!
    Проблема следующая: фон состоит из нескольких иллюстраций. Две из них расположены слева и справа. Они должны быть прижаты к краям, и разъезжаться в зависимости от размера окна браузера. Реализовал это с помощью двух блоков, оборачивающих страницу, со следующими стилями:
    Код:
    #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 (с этим косячным наездом фона).
    Перейти по ссылке
    Перейти по ссылке
    Перейти по ссылке
     
  2. zek24

    zek24

    Moderator
    Регистр.:
    14 ноя 2009
    Сообщения:
    778
    Симпатии:
    233
    Вариантов несколько, какой именно подойдет сейчас точно не скажу.
    1. Задать ширину блокам с иллюстрациями и отступы равные половине контента (для левого блока отступ справа, для правого слева)
    2. Поэкспериментировать с float, лефт для левого и райт для правого, добавить отступы (смотри выше) а между ними поместить контент.
     
  3. Krogrim

    Krogrim Создатель

    Регистр.:
    10 мар 2012
    Сообщения:
    23
    Симпатии:
    6
    И в итоге получим горизонтальную полосу прокрутки на 1024, не?
     
  4. Sonic

    Sonic Создатель

    Регистр.:
    6 сен 2011
    Сообщения:
    13
    Симпатии:
    1
    В 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 */
    }
     
  5. AlexMist

    AlexMist Создатель

    Регистр.:
    17 ноя 2009
    Сообщения:
    49
    Симпатии:
    7
    поиграйся с min-width и overflov: hidden
     
  6. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    overflow-x:hidden для body пропиши
     
  7. morke

    morke Создатель

    Регистр.:
    18 июн 2011
    Сообщения:
    25
    Симпатии:
    1
    я бы советовал сделать это через js. в зависимости от разрешения экрана добавлять / удалять класс с беграундом. так проще будет.
     
  8. Krogrim

    Krogrim Создатель

    Регистр.:
    10 мар 2012
    Сообщения:
    23
    Симпатии:
    6
    Так и сделал, подробное решение задачи здесь:

    Может кому нибудь в будущем пригодится.
     
    Speech нравится это.
Статус темы:
Закрыта.