Background image not showing up in span tag

The background-image CSS property only puts an image as the background. The width and height of an object is always defined either by static settings via CSS/inline styling, or by the actual size of the content displayed in it.
In your case, since you haven’t added any content between your tags, its x/y dimensions will be 0, but there is no bug with the background. It’s there, only you can’t see it unless you define (somehow) a size for the element.

<span class="design">Design Viz</span>
.design  {
padding-left:25px;
background:url(_includes/images/agenda-design.gif) no-repeat top left;
display: inline-block;
height: 17px;
width: 50px;
}

Where 50 can be any helpful value suited for your case.

Leave a Comment