Getting a background image to display in a blank div element

Question

I'm looking to use a blank div element to display a background image but nothing is displaying unless I put something (i.e., some text) in the div element.

I need to do this because I want to display a graphic next to some text but have the graphic vertically aligned with the text.

How do you get a background image to display in a blank div?

My Google-fu has failed me.

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

Thanks!

edit: The code below actually displays the image but I just need to nick it down like 2 or 3 pixels to have it perfectly aligned.

That's what I'm trying to achieve, any ideas?

<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

The background should be on the photoInfo div, and you can position it with background-position. You can't have a background on something that is 0 height and width. If you increase it though it will take up space on your design.

Answer 2

overflow:hidden might help, or assigning a length and a width to the div.

In general, I would think there are other ways of achieving what you want. If you just want to have a text and an image horizontally aligned you can do that without putting the image into a div. For example, you could use inline and float.

Answer 3

You have to give the div a size, otherwise its size its 0px x 0px.

Answer 4

Cheap work-aroound. put a non-break space ( ) in the div.

Answer 5

Give this a shot!

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

If you use a div instead of span, you'll need to set display: inline in the style as well.

Answer 6

If you don't want any text, this works in Safari and Firefox (didn't test IE):

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

Answer 7

Are you trying to move the background image without moving the div?

Try background-position: xpos ypos;

To move it down 3 pixels: background-position: 0px 3px;