How do I place a background-image ABOVE text using CSS?

I'm trying to keep my HTML very simple. I have a set list which declares the name of a Wizard like set of Steps...

<div>
    <ul class="wizardBar">
        <li class="step1">Step One</div>
        <li class="step2">Step Two</div>
        <li class="step3">Step Three</div>
    </ul>
</div>

And I have the following in my CSS file to format it...

.wizardbar
{
  display:table;           
  padding:0;
  margin:0;
  white-space:wrap;
  list-style-type:none;
}
* html .wizardbar {
  display:inline-block;
  width:1px;
  padding:0 2px;
}
.wizardbar li
{
  display:table-cell;
  width: 116px;
  text-align: center;
  padding-top: 36px;
}
.step1
{
  background: url('Step1.gif') no-repeat;
}
.step2
{
  background: url('Step2.gif') no-repeat;
}
.step3
{
  background: url('Step3.gif') n开发者_如何学运维o-repeat;
}

What I'm trying to accomplish here is something like...

Step1.gif.....Step2.gif.....Step3.gif

.STEP 1........STEP 2........STEP 3

Where the step name ie: "STEP 1" appears below the image for that step. Currently the text is ontop of the image. I do not want any overlap.

Thanks, Justin

Add this to your css file:

.div.wizardBar li {
padding-top: 50px;
}

Fiddle with the padding-top until you get the correct distance you need.

I'd give the background-position CSS attribute a look, probably in conjunction with tweaking element size.

http://www.w3schools.com/css/pr_background-position.asp for more.

Given you're detailing a progression, an inherently ordered structure, I'd strongly recommend using an ol in place of a ul. That said, the following should achieve your aim, albeit not as cleanly as I'd like:

li {
  padding-top: 30px; /* equal to or greater than the background-image's height */
}

Prefixing the li with the menu type you choose will increase specificity, if required.