CSS background-image doesn't show with meteor

Question

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.

Answer 1

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:

Answer 2

I had similar problem in my meteor "leaderboard" project with background image(local file) for page body. The solution was to create a folder with name "public" inside my project and to put background image into it. This way background will become reachable by meteor http://localhost:3000/bg.jpg

After that I was able to use it in my CSS code as usual:

body {
  background: url(bg.jpg) no-repeat fixed;
}

Answer 3

Don't forget the height value:

height: 30px;

When you use a background image in CSS the image doesn't consume space. You have to explitly tell the div how big it should be. Especially when there is nothing in it. However big you want it use that as the height, I've just put up 30px.

Update: I've double checked this is working: here is a screenshot: