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.

background-image: url('public/test.png') no-repeat; should do the job, if your page is outside of the public folder and your image is into the folder. — briosheje
– briosheje, Commented Sep 5, 2013 at 17:12

Matt C · Accepted Answer · 2013-09-06 09:50:02Z

3

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:

enter image description here

edited Sep 6, 2013 at 9:50

answered Sep 6, 2013 at 9:31

Matt C

9031 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergeus · Accepted Answer · 2014-09-19 08:56:36Z

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;
}

answered Sep 19, 2014 at 8:56

Sergeus

413 bronze badges

Comments

Tarang · Accepted Answer · 2013-09-05 22:52:01Z

1

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:

enter image description here

edited Sep 5, 2013 at 22:52

answered Sep 5, 2013 at 17:44

Tarang

76.1k39 gold badges220 silver badges279 bronze badges

1 Comment

Tarang Over a year ago

This has to be something else causing it, perhaps with your elements around the div? or other clashing css classes?. (see the update above - with screen shot). I used your gravatar as the image's url. Check the chrome inspector to see nothing is overriding the css' values. Perhaps you also have definitions for either .player, &/or .score on their own which override .player .score the class you've used

Collectives™ on Stack Overflow

CSS background-image doesn't show with meteor

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related