Span with background image and no content

Try putting a nonbreaking space inside, i.e.:

<span>&nbsp;</span>

Set style="padding-left:20px".

or set display:block; width:20px; height:20px.


Set the width; and height properties of the span.

<span style="width: 90px; height: 90px; background-image: url('bg.jpg'); display:block" />

You don't need to use display:block. You can use position: absolute. Set width and height as 100%. It will take the image width and height. So resize the image as per your need. And also image will be vertically center aligned to the text. Below is an example. In this I have used 20X20 px image. 

<html>
<style>
.spanImage{
    background-image: url('settings.png');
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>
<body>
<div>This is a sample demo.<span class="spanImage"></span></div>
</body>
</html>

Output:

enter image description here

Tags:

Html

Xhtml

Recent Posts