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

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.