Text Under Image (z-index)

[Hemlock]

Hello folks,Just a short handed question.I have the following CSS, in which I would like to appear the text under the image.

.titlebarimage {	background-image: url(images/titlebar.png);	background-repeat:no-repeat;	width: 716px;	height: 24px;	padding-top: 5px;	left: 0px;	z-index: 1;}.titlebartext {	width: 716px;	text-align: left;	padding-left: 10px;	height: 24px;	font-variant:small-caps;	z-index: -1;}

any suggestions? or is it remotely possible to set a Z-index to a text attribute?

[dsonesuk]

left:, and z-index: will only work, if position: is used (position:absolute, position:relative, or position:fixed) for that element as well.

[Hemlock]

I tried assigning the positions however, with little difference from what happened before.

.titlebarimage {	background-image: url(images/titlebar.png);	background-repeat:no-repeat;	position: relative;	width: 716px;	height: 24px;	padding-top: 5px;	left: 0px;	z-index: 100;}.titlebartext {	position: relative;	width: 716px;	text-align: left;	padding-left: 10px;	height: 24px;	font-variant:small-caps;	z-index: -1;}

[dsonesuk]

place the image div inside the text div, and then use top: to position image div correctly

[Hemlock]

Still remains the same sadly enough, had to alter a couple of position values now, but nothing that should interfere with the result. here is the CSS once more and HTML under it.

.titlebarimage {	background-image: url(images/titlebar.png);	background-repeat:no-repeat;	position: relative;	left: 0px;	left: 0px;	width: 716px;	height: 24px;	padding-top: 5px;	z-index: 100;}.titlebartext {	position: relative;	top: 0px;	left: 0px;	width: 716px;	height: 24px;	text-indent: 10px;	font-variant:small-caps;	z-index: 0;}

			   <div class="titlebartext">			   <div class="titlebarimage">				   News Article 				 </div>				 </div>

[dsonesuk]

does the image have a transparent area for the text to show through?you wanted text under image? or below?if transparent and under, remove the text from image div, and place it in text div, then position the image div using top (-10px for example), and left so the text can be seen through transparent area.if below? create outer div with required width 716px (maybe 2px bigger).separate image div, text div, and then place in outer, adjust and done.