Wie platziere ich einen Hintergrund-Bild über Text mit CSS?

Question

Ich versuche mein HTML sehr einfach zu halten. Ich habe eine Setlist, die den Namen eines Assistenten wie Reihe von Schritten erklärt ...

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

Und ich habe folgend in meiner CSS-Datei zu formatieren ...

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

Was ich Ich versuche hier zu erreichen ist so etwas wie ...

Schritt1.gif ..... Schritt2.gif ..... Schritt3.gif
.STEP 1 ........ SCHRITT 2 ........ SCHRITT 3

Whe Geben Sie den Schrittnamen ein, dh "SCHRITT 1" erscheint unter dem Bild für diesen Schritt. Derzeit befindet sich der Text oben auf dem Bild. Ich will keine Überschneidung.

Danke, Justin

Answer 1

Fügen Sie diese auf Ihre CSS-Datei:

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

Fiddle mit der padding-top, bis die richtige Strecke, die Sie benötigen.

Answer 2

Given Sie Detaillierung eine Progression, eine inhärent bestellt Struktur, würde ich empfehlen, ein ol anstelle eines ul verwenden. Das heißt, sollte die folgende Ihr Ziel erreichen, wenn auch nicht so sauber wie Ich mag würde:

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

die li mit dem Menütyp voranstellen Sie Spezifität zu erhöhen, wählen Sie, falls erforderlich.

Answer 3

Ich würde dem Hintergrund-Position CSS-Attribut ein Aussehen geben, wahrscheinlich in Verbindung mit der Optimierung der Elementgröße.

http://www.w3schools.com/css/pr_background-position.asp für mehr.