The background image in the span won't show without any text in the span tag

Question

The span below will not background image if I remove the inner text xxx

<span style='background-image:url("http://gifsoup.com/web/images/soc4.gif")'  style="height: 30px;">
 xxx
</span>

However it works without the xxx in the compatibility mode.

How do I make it work without any inner text?

Answer 1

Because spans default to inline elements that don't have a width or height. Change the CSS to:

span {
    display:inline-block;
    width:30px;
    background-image:url("http://gifsoup.com/web/images/soc4.gif");
    height:30px;
}

jsFiddle example

By changing the display from inline to inline-block you can set the width and height of the span.

Answer 2

the span element is an inline element and as such has no width or height. you must specify in the elements css that it should be displayed as either block or inline-block and then specify the width and height for the image.

span{
    display: inline-block;
    background-image:url("http://gifsoup.com/web/images/soc4.gif");
    width:30px;
    height:30px;
    border-radius: 5px;
}

Example