Локальный фоновый рисунок CSS не отображается

Question

Я пытаюсь отобразить локальный background-image в CSS. Он находится в той же папке, что и index.html, и не отображается.

.image { 
     width:100px; 
     background-image: url('PIC1.jpg'); 
    } 

Любая помощь приветствуется.

Answer 1

Это не появляется, потому что вы не дали высоту до DIV увидеть это http://jsfiddle.net/ce1j6k7k/2/ вы можете удалить высоту, чтобы увидеть разницу

HTML

<div id="image"></div> 

CSS

#image{ 
width:300px; 
height:300px; 
background-image:url('http://placekitten.com/300/301'); 
} 

Answer 2

Ресурсы, указанные в CSS, разрешены относительно пути файла CSS, а не страницы, ссылающейся на файл CSS. PIC1.jpg должен находиться в том же каталоге/папке, что и сам файл CSS.

В CSS нет способа сделать то, что вы думаете, и это хорошо, потому что я не могу придумать какой-либо возможный случай использования. Представьте себе, что эти страницы все ссылающихся style.css:

/index.html 
/products/fish.html 
/user/account/orderHistory 

... если style.css ссылка "foo.jpg", то foo.jpg должны быть воспроизведены в /foo.jpg, /products/foo.jpg и /user/account/foo.jpg.

Answer 3

Я могу думать о 3 возможных проблемах. Во-первых, путь изображения. например, если это реальный путь вашего изображения: D: \ Projects \ MyProject \ Content \ Images \ pic1.jpg

вы должны сделать это в коде:

background-image: url('~\Content\Images\PIC1.jpg'); 

Во-вторых, в том, что ширина которые вы установили в коде, не соответствует координатам изображения. В этом случае вы можете либо изменить код, либо изменить размер изображения.

И, наконец, изображение может быть не загружено на страницу и, обновив его несколько раз, оно может быть показано.