применение z-index

[FaTaL]

Начал изучать пару дней назат блочную верстку сайтов, да и вообще верстку сайтов... столкнулся с такой проблемой =)

как с помощью z-index (или есть другие теги какие?) расположить две картинки по очереди? а то одна перекрывает другую... хотелось бы все сделать в 1 блоке <div id="header"> </div> (была мысля разбить 2 изображения по блокам наложить их на друг друга и каждому присвоить очередность отображения)

еще z-index это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative, а я выравнивал картинку в блоке с помощью background-position:center, поскольку прийдется применять z-index, background-position:center уже не прокатит я так понимаю? прийдется background-position:center заменить padiing и делать отступы от всех краев блока на сколько мне нужно?

извращался с тегами поразному но ничего не получилось =)

    <div id="header"> </div>

#header {
	height: 313px;
	width: 986px;

	position:relative;
	background-image: url(img/bg-header.png);
	background-image: url(img/headline.png);

	background-repeat: no-repeat;
	margin: 43px 155px 0px 155px;
	border: solid 1px black;	
}

1 2 3

1)как на данный момент все смотрится =)

2)как смотрится фон

3)как должно быть

Edited January 22, 2012 by FaTaL

[Gaspode]

background-image: url(img/bg-header.png);
background-image: url(img/headline.png);

Что за новости, откуда два-то?

[FaTaL]

background-image: url(img/bg-header.png);
background-image: url(img/headline.png);

Что за новости, откуда два-то?

это я просто в коде все так оставил "сырым" показать что они вместе должны быть

1)первый скриншот показывает как смотрится с background-image: url(img/headline.png)

2)второй скриншот показывает как смотрится с background-image: url(img/bg-header.png)

[hedgehog]

• bg-header.png - бекграундом для #header
  
• headline.png - бекграундом в блок внутри #header, картинкой <img> внутри #header или псевдоэлементом #header:after
  

[seemax]

background-image: url(img/bg-header.png);
background-image: url(img/headline.png);

Что за новости, откуда два-то?

это я просто в коде все так оставил "сырым" показать что они вместе должны быть

1)первый скриншот показывает как смотрится с background-image: url(img/headline.png)

2)второй скриншот показывает как смотрится с background-image: url(img/bg-header.png)

А правда, разве можно две начинки в один пирожок?

[seemax]

background-image: url(img/bg-header.png);
background-image: url(img/headline.png);

Что за новости, откуда два-то?

это я просто в коде все так оставил "сырым" показать что они вместе должны быть

1)первый скриншот показывает как смотрится с background-image: url(img/headline.png)

2)второй скриншот показывает как смотрится с background-image: url(img/bg-header.png)

А правда, разве можно две начинки в один пирожок?

Спасибо ёжик, работает! Картинка через тег ложится на картинку через стиль. И позиционируется нормально через absolute.

А что можно сделать в DW при помощи Insert+Image Objects+Rollover Image? Иконка позволяет вставить две картинки. Подскажите плз, кто знает, как это работает.

[FaTaL]

• bg-header.png - бекграундом для #header
  
• headline.png - бекграундом в блок внутри #header, картинкой <img> внутри #header или псевдоэлементом #header:after
  

вот так вот получилось как нужно =)

<div id="header">
        <div id="headline"> 

        </div><!-- #headline--> 

    </div><!-- #header--> 



#header {
	height: 313px;
	width: 986px;


	background-image: url(img/bg-header.png);
	background-position:center;
	background-repeat: no-repeat;
	margin: 43px 155px 0px 155px;
	border: solid 1px black;
}

#headline {
        height: inherit;
	width: inherit;  
        background-image: url(img/headline.png);
	background-position:bottom;
        background-repeat: no-repeat;
	border: solid 1px black;
}

я наверное не понял как ежик подсказывал... но хотелось бы провернуть все в 1 блоке.

<div id="header">
</div><!-- #header--> 

#header {
}

пожалуйста может кто на примере раписать в коде о чем ежик говорил хотябы примерно?

Edited January 23, 2012 by FaTaL

[hedgehog]

Вариант с псевдоэлементом: http://jsfiddle.net/2n59m/ (не работает в старых браузерах).