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

Question

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

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

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

Мой Google-фу подвел меня.

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

Answer 1

Дайте этому шанс!

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

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

Answer 2

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

Answer 3

Недорогой трудоемкость. поместите неразрывный пробел (& nbsp;) в div.

Answer 4

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

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

Answer 5

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

Answer 6

overflow:hidden может помочь, или присвоение длины и ширины div.

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

Answer 7

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

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

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