Uzyskiwanie obrazu tła do wyświetlania w pustym elemencie div

Question

Szukam użyć pustego elementu div do wyświetlenia obrazu tła, ale nic nie jest wyświetlane, chyba że wstawię coś (to znaczy jakiś tekst) do elementu div.

Muszę to zrobić, ponieważ chcę wyświetlić grafikę obok tekstu, ale grafikę należy ustawić pionowo w stosunku do tekstu.

Jak uzyskać obraz tła do wyświetlenia w pustym dziale?

Moje Google-fu mnie zawiodło.

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

Dzięki!

edytuj: Poniższy kod faktycznie wyświetla obraz, ale wystarczy go nanieść w dół jak 2 lub 3 piksele, aby idealnie go dopasować.

To właśnie próbuję osiągnąć, jakieś pomysły?

<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

Daj temu szansę!

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

Jeśli używasz div zamiast span, musisz ustawić display: inline w stylu, jak również.

Answer 2

Tło powinno być na photoInfo div, można umieścić go background-position. Nie możesz mieć tła na czymś, co jest 0 wysokością i szerokością. Jeśli ją zwiększysz, zajmie to trochę miejsca na twoim projekcie.

Answer 3

overflow:hidden może pomóc lub przypisać długość i szerokość do elementu div.

Ogólnie sądzę, że istnieją inne sposoby osiągnięcia tego, co chcesz. Jeśli chcesz mieć tylko wyrównany tekst i obrazek w poziomie, możesz to zrobić bez umieszczania obrazu w obrazie div. Na przykład możesz użyć inline i float.

Answer 4

Musisz podać rozmiar div, w przeciwnym razie jego rozmiar to 0px x 0px.

Answer 5

Tanie praca-aroound. wstaw w polu div spację bez przerw (& nbsp;).

Answer 6

Jeśli nie chcemy żadnego tekstu, to działa w Safari i Firefox (nie testowałem IE):

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

Answer 7

Starasz się przenieść obraz tła bez przesuwania div?

Spróbuj background-position: xpos ypos;

Aby przesunąć go w dół 3 piksele: background-position: 0px 3px;