Comment placer une image d'arrière-plan au-dessus du texte en utilisant CSS?

Question

J'essaie de garder mon HTML très simple. J'ai une setlist qui déclare le nom d'un assistant comme ensemble des étapes ...

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

Et je suit dans mon fichier CSS pour formater ...

.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') no-repeat; 
} 

Ce que je J'essaie d'accomplir ici est quelque chose comme ...

Étape1.gif ..... Step2.gif ..... Step3.gif
. ÉTAPE 1 ........ ÉTAPE 2 ........ ÉTAPE 3

Whe re le nom de l'étape c'est-à-dire: "STEP 1" apparaît sous l'image pour cette étape. Actuellement, le texte est sur l'image. Je ne veux pas de chevauchement.

Merci, Justin

Answer 1

Ajouter à votre fichier css:

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

Fiddle avec le padding-top jusqu'à ce que vous obtenez la bonne distance dont vous avez besoin.

Answer 2

Étant donné que vous êtes détaillant une progression, une structure intrinsèquementordonné, je vous recommande fortement d'utiliser un ol en place d'un ul. Cela dit, ce qui suit devrait atteindre votre objectif, mais pas aussi proprement que je voudrais:

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

préfixant le li avec le type de menu que vous choisissez d'augmenter la spécificité, le cas échéant.

Answer 3

Je donnerais un aspect à l'attribut CSS position d'arrière-plan, probablement en conjonction avec la taille de l'élément de peaufinage.

http://www.w3schools.com/css/pr_background-position.asp pour plus d'informations.