My css background-image doesn't show

Question

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."

Are you sure that `space.jpg` is in the same directory as the CSS file? — Andreas Fröwis, Feb 27 '18 at 10:56
Already tried to put a height and a width to my image but didn't change. Yes I'm sure, and I also tried with other images — Dimitri Sergeant, Feb 27 '18 at 11:10
Chances are if you're using meteor, you may not have your routing set up properly, and adding an image to the same file system, isn't really going to help you out. Try adding it to a 'public' or 'static' folder, and try the same route. — Andrew Ice, Feb 27 '18 at 11:13
For reference: https://stackoverflow.com/questions/21341291/how-to-serve-static-content-images-fonts-etc-using-iron-router — Andrew Ice, Feb 27 '18 at 11:14
Read this: https://guide.meteor.com/structure.html#special-directories — coagmano, Feb 28 '18 at 06:05

score 1 · Accepted Answer · answered Feb 27 '18 at 11:18

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.

Awesome, glad to hear it. – Andrew Ice Feb 27 '18 at 13:43 — Andrew Ice, Feb 27 '18 at 13:43

score -1 · Answer 2 · answered Feb 27 '18 at 11:00

-1

Open devtools in Chrome
Click to "console"
You can see error space.jpg not found
See link on error to your image
Search difference between link in error and real place your image (solution 1)
If all good - play with width/heigh/background-position (solution 2)

answered Feb 27 '18 at 11:00

Princeair

19
5

I have no error in the console. And I already tried the solution 2. The path is good, and when I try with other images it shows the same error. – Dimitri Sergeant Feb 27 '18 at 11:13

My css background-image doesn't show

2 Answers2