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

droni4

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

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

пример где увидел это
но как реализовать не понял...
через z-index?
 
В приведённом примере нет наложения.
Есть основной фон, помоему прикручен к body, а по середине идёт блок div с контентом.
Ближе по вашему вопросу, вот пример с z-index: Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
 
  • Заблокирован
  • #3
Всё верно! Делается это через 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.
 
что бы работало в
Код:
<div id="dop-bg-верхний фон - no-repeat">
  <div id="osnov-bg-после того как верхний фон заканчивается начинается этот фон - repeat">контент</div>
</div>

так и не понял как реализовать z-index слой на слой... но пробую так не получается
 
Если
после того как верхний фон заканчивается начинается этот фон
"после того", то блоки следует поменять местами..
Т.е. фон, который перекрывается должен быть на заднем фоне.

Т.е. либо так:
Код:
<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
так и не понял как реализовать 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;
}
ЗЫ. Это что бы налаживался друг на друга
А вообще - ваши "хочу расходятся" - давайте ссылку - дам готовый стиль!
 
Назад
Сверху