Получение фонового изображения для отображения в пустом элементе div

Я хочу использовать пустой элемент div для отображения фонового изображения, но ничего не отображается, если я не помещу что-то (например, некоторый текст) в элемент div.

Мне нужно сделать это, потому что я хочу отобразить графику рядом с некоторым текстом, но графику выровнять по вертикали с текстом.

Как получить фоновое изображение для отображения в пустой div?

Мой Google-fu не помог мне.

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

Спасибо!

изменить: В приведенном ниже коде на самом деле отображается изображение, но мне просто нужно опустить его, как 2 или 3 пикселя, чтобы он был идеально выровнен.

Что я пытаюсь достичь, любые идеи?

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

Ответ 1

Сделайте этот снимок!

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

Если вы используете div вместо span, вам также нужно установить display: inline в стиле.

Ответ 2

Вы должны предоставить div размер, в противном случае его размер равен 0px x 0px.

Ответ 3

Дешевая работа. поместите незамкнутое пространство (& nbsp;) в div.

Ответ 4

Если вы не хотите текст, это работает в Safari и Firefox (не тестировал IE):

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

Ответ 5

Фон должен быть на фотоинформации div, и вы можете поместить его с помощью background-position. У вас не может быть фона на высоте 0 и ширине. Если вы увеличите его, хотя это займет место в вашем дизайне.

Ответ 6

overflow:hidden может помочь или назначить длину и ширину div.

В общем, я бы подумал, что есть другие способы достижения того, чего вы хотите. Если вы хотите, чтобы текст и изображение были выровнены по горизонтали, вы можете сделать это, не помещая изображение в div. Например, вы можете использовать inline и float.

Ответ 7

Вы пытаетесь переместить фоновое изображение, не перемещая div?

Попробуйте background-position: xpos ypos;

Чтобы переместить его на 3 пикселя: background-position: 0px 3px;