I'm trying to create a simple meteor project based on the leaderboard example in their site. I want to add a small icon next to the score of each player. For doing so I created a folder named public and put test.png image there. In the css of .player .score I added the image as a background-image and not it looks like this

.player .score {
   background-image: url('test.png');
   display: inline-block;
   width: 100px;
   text-align: right;
   font-size: 2em;
   font-weight: bold;
   color: #777;
}

When I deploy the project the image appears blank. The url for the image is not broken because if I use inspect element with chrome browser and go to resources I can see that the image was loaded.

Two things.

1) Keep in mind that for the leaderboard example, adding a background to the .player .score descendent selector will place the image underneath the score, rather than next to it. To place the image next to the score, add an empty span to the player template:

<template name="player">
  <div class="player {{selected}}">
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
    <span class="icon"></span>
  </div>
</template>

2) You need to add a size to the span as well as to the background image. In your css, style the span for your image separately:

.icon{
    background-image: url('test.png');
    background-size: 40px 40px;
    background-repeat:no-repeat;
    width: 40px;
    height: 40px;
    display: inline-block;
}

For an image placed at the root of the public directory, the above results in this:

more