Image as background in span not rendering - html

Question

I have the following class
.stats {
content: url('images/stats.gif');
background-repeat: no-repeat;
width: 23px;
height: 20px;
float: right;
}
and the following span
<span class="stats" ng-click="showTabDialog(player)"></span>
This renders fine in Chrome but I do not see the image in IE11 even though I can click in the place where the image should be and it works correctly
Why do I not see the image in IE?

Answer 1

Why do you have content: url('images/stats.gif')? The content CSS property only works with pseudo-elements ::before and ::after. I would suggest to try setting it as a background-image:
.stats {
background-image: url('http://onlywm.ru/vbfs_aBlackRed/misc/stats.gif');
background-repeat: no-repeat;
background-size: contain;
width: 23px;
height: 20px;
float: right;
}
<span class="stats" ng-click="showTabDialog(player)"></span>

Answer 2

content CSS property only works with the ::before and ::after pseudo-elements:
https://developer.mozilla.org/en-US/docs/Web/CSS/content
Chrome doesn't respect the specifications in that regard.
You should use background-image.

Answer 3

Add display-block to your css. 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
.stats {
width: 23px;
height: 20px;
background-image: url('http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg') ;
background-repeat: no-repeat;
display: block;
float : right;
}
JSFIDDLE

Answer 4

three mandatory attributes in the css for rendering the image (other than the background-image):
height: 40px; //change size as needed
width: 40px; //change size as needed
display: block; //Tend to miss this one out
Without height and width, if your asset takes time to render, the element will not be alloted an region space. Without display: block, the image only exists in the background. (tried too many things before discovering this subtle mistake).
Other attributes are optional and needed based on your requirement of positioning the image.