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

[droni4]

Здравствуйте уважаемые подскажите пожалуйста
как наложить фон на фон
Например:

<div id="dop-bg">
    <div id="osnov-bg">
    </div>
</div>

что бы в диве dop-bg был фон который налаживаем на основной
а в osnov-bg был основной

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

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

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

 

[01K]

В приведённом примере нет наложения.
Есть основной фон, помоему прикручен к body, а по середине идёт блок div с контентом.
Ближе по вашему вопросу, вот пример с z-index: Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

 

[Denis_Pi]

Всё верно! Делается это через 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.

 

[droni4]

что бы работало в

<div id="dop-bg-верхний фон - no-repeat">
  <div id="osnov-bg-после того как верхний фон заканчивается начинается этот фон - repeat">контент</div>
</div>

так и не понял как реализовать z-index слой на слой... но пробую так не получается

 

[esche]

Если

после того как верхний фон заканчивается начинается этот фон

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

Т.е. либо так:

<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>

 

[Denis_Pi]

так и не понял как реализовать z-index слой на слой... но пробую так не получается

Спойлер

<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;
}

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