css наложение Фона на фон

Тема в разделе "Верстка", создана пользователем droni4, 27 янв 2014.

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

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    182
    Симпатии:
    7
    Здравствуйте уважаемые подскажите пожалуйста
    как наложить фон на фон
    Например:
    Код:
    <div id="dop-bg">
        <div id="osnov-bg">
        </div>
    </div>
    что бы в диве dop-bg был фон который налаживаем на основной
    а в osnov-bg был основной

    пример где увидел это

    но как реализовать не понял...
    через z-index?
     
  2. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    291
    Симпатии:
    43
    В приведённом примере нет наложения.
    Есть основной фон, помоему прикручен к body, а по середине идёт блок div с контентом.
    Ближе по вашему вопросу, вот пример с z-index: Перейти по ссылке
    Перейти по ссылке
     
  3. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    Всё верно! Делается это через z-index...
    но в приведённом примере сделано по другому :
    Задний фон там установлен не через стиль бекграундом, а просто прописан в коде картинкой,
    А фон рабочей области в свою очередь задан бекграундом...
    НО - там и блоки заданы по другому - интерпретируя на Ваш код там прописано так:
    Код:
    <div id="dop-bg" style="position: absolute; top: 0px; left: -574.5px; width: 1351px; height: 1435px;">
    <img id="_mjs-object_12" src="/47669/images/bg_img1.jpg" class="" style="width: 2500px; height: 1435px;">
    </div>
    <div id="osnov-bg" style="top: 0px; bottom: 0px; width: 1250px; left: 0px; z-index: 1002; background-image: url(http://templates.cms-guide.com/47669/images/bg1.png); background-position: 0% 0%; background-repeat: repeat repeat;">
        </div>


    ps. причём стили там так и прописаны - внутри кода - что муветон - лучше вынести их в css.
     
  4. droni4

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    182
    Симпатии:
    7
    что бы работало в
    Код:
    <div id="dop-bg-верхний фон - no-repeat">
      <div id="osnov-bg-после того как верхний фон заканчивается начинается этот фон - repeat">контент</div>
    </div>
    так и не понял как реализовать z-index слой на слой... но пробую так не получается
     
  5. esche

    esche

    Регистр.:
    9 авг 2009
    Сообщения:
    359
    Симпатии:
    243
    Если
    "после того", то блоки следует поменять местами..
    Т.е. фон, который перекрывается должен быть на заднем фоне.

    Т.е. либо так:
    Код:
    <div id="osnov"><div id="topbg"></div></div>
    
    Либо так (стили для лучшего выделения блока на время тестирования:(
    Код:
    <div id="osnov"></div><div id="topbg"></div>
    <style>#topbg {position:absolute; width:100%; height:50px; left:0; top:0; border:solid 1px red}</style>
     
  6. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    Код:
    <div id="dop-bg">
      <div id="osnov-bg">контент</div>
    </div>
    CSS
    Код:
    #dop-bg{
    position: absolute;
    width: 1250px;
    hight: auto;
    z-index: 100;
    background-image: url(http://templates.cms-guide.com/47669/images/bg1.png);
    background-position: 0% 0%;
    background-repeat: no-repeat;
    }
    
    #osnov-bg{
    position: relative;
    display: block;
    margin: 0 auto;
    width: 1000px;
    hight: auto;
    z-index: 101;
    background-image: url(http://templates.cms-guide.com/47669/images/bg1.png);
    background-position: 0% 0%;
    background-repeat: no-repeat;
    }
    

    ЗЫ. Это что бы налаживался друг на друга
    А вообще - ваши "хочу расходятся" - давайте ссылку - дам готовый стиль!