Stack text above an image

HTML & CSS
1

On the .box in the bottom right, Im trying to place the picture (of the stick figures in a circle) behind a <h2> So I tried to position its container relatively so I could absolutely position the image to give it a negative z-index.
How can this be done?
http://fixmysite.us/menu.php

thx

2

Which image? I didn’t see any stick figures on the page you linked to.

Also, I might not understand the issue, but can you just use a background image instead of an inline <img> element?

3

Why not just take out the z-index and place the H2 within the SPAN that has the background image? Then the H2 naturally sits on top of the image.

4

I don’t think it’s valid html to place a block level element inside an inline element

5

Then why not change SPAN to DIV?

6

In fact with CSS 3, he wouldn’t need to even have the extra span or div, just add a second background to .box. But, of course ie8- would be non compliant.

7

No idea!

In my FF7 I don’t see the stick figure and circle the op mentioned.

8

That’s because the z-index is set to -100 or something like that. It’s sitting under that lower left hand box.

9

I couldn’t find the stick figure either but those h2 bowes are in need of renovation as you can’t place an h2 inside a span as already mentioned. You can do it much more simply like this:


<h2 class="box community">Join the Community</h2>
<h2 class="box from">From the Blog<span></span></h2>
<h2 class="box contact">Contact us<span></span></h2>




.box {
	float:left;
	position:relative;
	width:250px;
	height:189px;
	padding:20px 0 0 25px;
	border:1px solid #442;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	-moz-box-shadow:0 0 4px #000, 0 0 4px 8px #666;
	-webkit-box-shadow:0 0 4px #000, 0 0 4px 8px #666;
	box-shadow:0 0 4px #000, 0 0 4px 8px #666;
	background: #ffffff url(http://fixmysite.us//images/box_bg.png) bottom repeat-x;
	margin:0 84px 100px 0;
	font: bold 160% Georgia, Times, serif;
	color: #333;
}
.community{background:url(http://fixmysite.us/images/community.jpg);}
.from span,.contact span{
	background:url(http://fixmysite.us/images/blog.jpg) no-repeat 100% 0;
	width:275px; 
	height:150px;
	position:absolute;
	right:0;
	top:20px;
	z-index:3;
}
.contact span{
	background:url(http://fixmysite.us/images/contact.jpg) no-repeat 100% 100%; 
}
.contact{margin-right:0}