Ottenere un'immagine di sfondo per visualizzare in un elemento div vuoto

Question

Sto cercando di utilizzare un elemento div vuoto per visualizzare un'immagine di sfondo, ma nulla si visualizza a meno che non ho messo qualcosa (vale a dire, un po 'di testo) nell'elemento div.

Ho bisogno di fare questo perché voglio visualizzare un grafico accanto ad un testo, ma hanno la grafica allineata verticalmente con il testo.

Come si ottiene un'immagine di sfondo per visualizzare in un div vuoto?

Il mio Google-fu mi ha fallito.

<div class="photoInfo"> 
lorem ipsum | 
<div style="background:url('foo.gif') no-repeat;display:inline;"></div> 
</div> 

Grazie!

modifica: Il codice sottostante visualizza effettivamente l'immagine, ma ho solo bisogno di ridimensionarlo come 2 o 3 pixel per averlo perfettamente allineato.

Questo è quello che sto cercando di ottenere, qualche idea?

<div class="photoInfo"> 
    Added<span class="spacer">•</span>Wed Apr 01, 2009 1:01 pm<span class="spacer">•</span>64.10 KB<span class="spacer">•</span>659x878 pixels 
    <span class="spacer">•</span> 
    <img src="/_assets/img/icons/new-photo-small.gif" /> 
</div> 
<!--<div style="height:14px;width:31px;background:url('') no-repeat 0px 5px;display:inline-block;"></div>--> 

.photoInfo 
{ 
font-size:0.6em; 
color:#b0bad9; 
padding-bottom:15px; 
text-align:center; 
} 

Answer 1

Dai uno scatto!

one | <span style="padding-left: 20px; background: url('16x16-image.gif') no-repeat; height: 16px">two</span> | three 

Se si utilizza un div invece di span, è necessario impostare display: inline nello stile pure.

Answer 2

Lo sfondo dovrebbe essere sul photoInfo div, ed è possibile posizionarlo con background-position. Non puoi avere uno sfondo su qualcosa che è 0 altezza e larghezza. Se lo aumenti anche se occuperà spazio sul tuo progetto.

Answer 3

overflow:hidden potrebbe aiutare, o l'assegnazione di una lunghezza e una larghezza al div.

In generale, mi potrebbe pensare che ci sono altri modi per ottenere ciò che si desidera. Se vuoi semplicemente avere un testo e un'immagine allineati orizzontalmente puoi farlo senza inserire l'immagine in un div. Ad esempio, è possibile utilizzare inline e float.

Answer 4

devi dare il div una dimensione, altrimenti la sua dimensione propria 0px 0px x.

Answer 5

Lavoro a buon mercato. inserire uno spazio non interrotto (& nbsp;) nel div.

Answer 6

Se non si desidera alcun testo, questo funziona in Safari e Firefox (non prova IE):

one | <span style="padding: 16px 16px 0 0; background: url('16x16-image.gif') no-repeat; font-size: 0">&nbsp;</span> | three

Answer 7

Stai cercando di spostare l'immagine di sfondo senza spostare il div?

Prova background-position: xpos ypos;

Per spostare verso il basso 3 pixel: background-position: 0px 3px;