Search code examples
htmlcssmeteorbackground-image

My css background-image doesn't show

I have an issue that all beginners in CSS seems to have, my background-image doesn't show.
When I try to put background-color it works, and with image nothing shows-up. I have put my image in the same folder than my files css and html. I want to set the image as the background of my <body>. I use the framework meteor.

Here is the code HTML: 

<body> 
  <div class="Units" id="UnitsSelector">
    {{>units}}
  </div>
  <h1>Test </h1>
</body>

Here is a part of the CSS file: 

body {
 display: block;
 width: 900px;
 margin: auto;
 color: black;
 background-image:url('space.jpg');
}

Also when I use the inspect tool on my browser and I try to open my url I have this error :

Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/space.jpg."

Solution

  • The best approach I see here, is similar to these question: How to serve static content (images, fonts etc.) using iron router

    Although you haven't stated that you're using iron router. The answer will be the same.

    Instead of doing all this, you can just put the files under your public directory. If you add the file:

    app/public/images/space.jpg

    You can access it from your templates like:

    <img src="/images/space.jpg">

    No routes are needed to make that work.

    Beware of overlooking the lead slash.

    <img src="images/space.jpg">

    The above example will work from your top level routes.