Разные фоны

Тема в разделе "OpenCart", создана пользователем Reqman, 17 мар 2014.

  1. Reqman

    Reqman

    Регистрация:
    25 фев 2013
    Сообщения:
    213
    Симпатии:
    62
    Ребята, помогите пожалуйста реализовать разные фоны, для блоков страницы: т.е. хотел бы, чтоб header имел ФОН "А", main имел ФОН "B", а footer имел ФОН "C". Пример можете взглянуть на картинке. Хочу сделать именно так. Как же сделать, чтоб фон был на всю ширину экрана, а не только на размер контейнера?
    Скриншот (кликабельный):
    Очень прошу помочь! Спасибо за внимание!
     
  2. gid

    gid

    Регистрация:
    14 фев 2013
    Сообщения:
    102
    Симпатии:
    19
    поместить каждый ваш контейнер в новый с шириной 100% и везде прописать фоны
     
    Reqman нравится это.
  3. Reqman

    Reqman

    Регистрация:
    25 фев 2013
    Сообщения:
    213
    Симпатии:
    62
    Спасибо за ответ! Но ведь нужно же еще и вынести их за пределы container, верно?
    upd: По вашему методу все сбивается, все элементы отображаются слева, никакой отцентровки нету.
    Скриншот:
     
    Последнее редактирование: 17 мар 2014
  4. gid

    gid

    Регистрация:
    14 фев 2013
    Сообщения:
    102
    Симпатии:
    19
    центровка: margin: 0 auto;
    можно попробовать у первого фона указать background-size и выставить высоту фона с отступом
    а чтобы второй фон был под центральным верхним блоком... можно попробовать выставить position:absolute; top: подобрать, чтобы он был с нахлёстом на первый блок.
    Например центральному блоку выставить z-index: 999; центральному растянутому на всю ширину - z-index: 777; а нижнему блоку z-index: 888;
    может даже не нужно background-size подгонять
    есть ссылка на сайт со скриншота?
     
    Reqman нравится это.
  5. Reqman

    Reqman

    Регистрация:
    25 фев 2013
    Сообщения:
    213
    Симпатии:
    62
    Спасибо за ответ! Буду думать, пробовать. Пример можно глянуть ТУТ.
     
  6. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    Все просто.
    Убираете #container (он в файлах header.tpl и окончание в footer.tpl). В CSS создаете новые элементы (классы)
    Код:
    .container{
        width: 980px;
        margin: 0 auto;
    }
    .container-wrapper{
       width:100%;
       margin:0px;
       padding:0px;
    }
    .header-bg{background:url('путь к изображению шапки') repeat;}
    .content-bg{background:url('путь к изображению контента') repeat;}
    .footer-bg{background:url('путь к изображению футера') repeat;}
    Затем оборачиваете шапку, контент, футер в tpl файлах в такую обертку:
    HTML:
    <div class="container-wrapper header-bg">
       <div class="container">
       <!-- содержимое шапки --/> 
       </div>
    </div>
    <div class="container-wrapper content-bg">
       <div class="container">
       <!-- содержимое контента --/> 
       </div>
    </div>
    <div class="container-wrapper footer-bg">
       <div class="container">
       <!-- содержимое футера --/> 
       </div>
    </div>
    И все.
     
    HPlus и Reqman нравится это.
  7. Reqman

    Reqman

    Регистрация:
    25 фев 2013
    Сообщения:
    213
    Симпатии:
    62
    Огромное спасибо! Очень интересный вариант. Сейчас буду пробовать.
     
    halfhope нравится это.
  8. mytraz

    mytraz

    Регистрация:
    12 фев 2013
    Сообщения:
    102
    Симпатии:
    6
    главное не забыть что каждый кусок выносится в одтельный файл *.tpl
     
  9. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    Во всей работе будут участвовать всего два файла header.tpl и footer.tpl.
    header.tpl
    Код:
    <div class="container-wrapper header-bg">
       <div class="container">
       <!-- содержимое шапки --/>
       </div>
    </div>
    <div class="container-wrapper content-bg">
       <div class="container">
    footer.tpl
    Код:
    </div>
    </div>
    <div class="container-wrapper footer-bg">
       <div class="container">
       <!-- содержимое футера --/>
       </div>
    </div>
     
    HPlus и Reqman нравится это.
  10. Reqman

    Reqman

    Регистрация:
    25 фев 2013
    Сообщения:
    213
    Симпатии:
    62
    Скажите пожалуйста, а как-то можно сделать так, что фон контента наложился на пикселей 10 на фон шапки?
     
  11. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    Не знаю. Видимо придется для фона шапки вручную создать изображение, которое содержит 10 пикселей фона контента.
     
    HPlus и Reqman нравится это.