css image from hard disk

问题

im about to build a GUI and I am trying to load an image as background image via css. My HTML sheet is nearly empty except the headline and a div container in which I load the GUI, built with JAVA and the Google Web Toolkit.

Loading the background image from the internet works out pretty well!

.Bild {
    background: url("http://developer.aldebaran-robotics.com/media/img/home/nao_h25.png")
    no-repeat
    center;
}

BUT now i want to load it from my hard disk, better to say from a folder in the project. The structure looks like this:

workspace → project → war → css file

workspace → project → images → image.png

I tried it by using a relative path. I am not sure if I did it correctly. It doesnt work:

.Bild {
    background: url(/images/image.png)
    no-repeat
    center;
}

Im sure you can help me!

Thanks a lot

回答1:

You need to provide the path of the image file relative to the css file Lets take your directory structure example:

workspace/
 project/
   war/
      cssfile.css
   images/
      image.png 

Your image path relative to the css file would have to be

../images/image.png

.Bild {
    background: url(../images/image.png)
    no-repeat
    center;
}

Here: .. means one directory above the current directory. You can use ../../ to go two directories up.

To figure out the relative path, you need to navigate up to the common parent directory and then walk down to the location of the media file. In this case, the common parent directory is one level up, hence ../ is enough and then walk down the directory structure images/image.png.

回答2:

There is nothing wrong with the syntax. So the problem must be with the path. By starting the url with a slash /,

/images/image.png

implies an absolute location of

http://some-host-name/images/image.png

is that where your image is?

来源：https://stackoverflow.com/questions/15744919/css-image-from-hard-disk