Jump to content

Text Under Image (z-index)


Hemlock
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...