CODEWITHSUNDEEP
meteor
lbj-ub
lbj-ub

Reputation: 1423

Loading background images from css file in meteor

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;

Upvotes: 16

Views: 11953

Answers (5)

lbj-ub
lbj-ub

Reputation: 1423

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.

Upvotes: 24

Тип Странный
Тип Странный

Reputation: 21

Files need put to /public directory and remove "/public" in path from css.

For example: If Image in path - /public/img/logo.png

Then use below CSS : 

background-image('img/logo.png');

Upvotes: 2

radhouen
radhouen

Reputation: 21

my web site architecture 

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

Upvotes: 2

Victor S
Victor S

Reputation: 5142

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

Upvotes: 2

TimDog
TimDog

Reputation: 8928

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.

Upvotes: 14

Related Questions