Использование фонового изображения CSS

Question

Я пытаюсь разместить изображение на фоне моего приложения. Кажется, у меня проблемы с CSS. У меня есть следующий класс:

.fixedBar { 
    position: fixed; 
    left:0%; 
    top: 0%; 
    width:100%; 
    padding:15px 15px; 
    background-color:#003c0c; 
    background-image: url(NavAppPics/city-clipart-black-and-white.gif); 
    background-blend-mode: multiply; 
    background-size:cover; 
    z-index: 6; 
} 

Я пытаюсь использовать изображение из папки, но я не могу понять, как загрузить изображение из папки. Я просмотрел другие подобные вопросы os Stack Overflow, но я не могу сказать, что я делаю по-другому.

Кроме того, я пытаюсь сделать нижнюю часть изображения строкой с нижней частью фиксированной полосы (класс, который я использую), однако он, кажется, неправильно выравнивает изображение (я переключился на онлайн-адрес чтобы проверить это). любые идеи или помощь были бы высоко оценены!

редактировать:

Моя структура папок для этого раздела:

• Общественные
  • bower_components
  • директивы
  • NavAppPics
    • город-клипарт-черно-white.gif
  • стили
    • styles.css (где класс)
  • TPL

Answer 1

EDIT : Путь к файлу должен быть неправильным для вашего изображения. Где находится папка NavAppPics? Если он находится в корневом каталоге, добавьте / к передней части URL, чтобы сказать, что это начинается с корневого каталога, а не в текущей папке:

background-image: url(/NavAppPics/city-clipart-black-and-white.gif); 

Насколько выравнивая изображение в нижней части DIV:

background-position: center bottom; 

Более подробная информация о background-position собственности:

http://www.w3schools.com/cssref/pr_background-position.asp

Answer 2

адрес изображения по отношению к файл стиля CSS.

Поскольку ваш CSS находится на styles/styles.css, фоновое изображение находится на styles/NavAppPics/city-clipart-black-and-white.gif.

Укажите относительный или абсолютный путь, чтобы исправить эту проблему:

background-image: url(/NavAppPics/city-clipart-black-and-white.gif); 

Или:

background-image: url(../NavAppPics/city-clipart-black-and-white.gif);