Loading background images from css file in meteor

Question

I am building a meteor application for the first time and have run into some issues. In particular, I'm trying to get a picture viewer to work but the right and left arrows in the navigation buttons seem to be missing. When I attempt to load the images that are supposed to be in the button using google's developer tools, it's being displayed as an empty image. Thus, it's probably a case of me not putting the image file in the appropriate directory and as a result meteor is not able to load it in the css file. I'm not sure if this is the case or it's something else. It's probably not any syntax errors as I'm able to see the arrows in the button when I run the plugin outside of meteor.

Here's the line in my css file:

background: transparent url('themes.gif') no-repeat left top;  margin-top: -45px;

Answer 1

So I managed to get it to work. I created a resources directory in the public folder and changed the url in the css file to url("/resources/button"), which seemed to do the trick.

Answer 2

You can leave your CSS as it is and put the themes.gif file in the /public directory of your Meteor app -- then it should be accessible.

Per the docs:

Lastly, the Meteor server will serve any files under the public directory, just like in a Rails or Django project. This is the place for images, favicon.ico, robots.txt, and anything else.

Answer 3

You have to prefix a / in front of your file name.

Answer 4

my web site architecture

body{   
  background-image: url('image/back1.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}