Using a background image CSS - html

Question

I am trying to put an image into the background of my app. I seem to be running into some issues with the CSS. I have the following class:
.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;
}
I am trying to use an image from a folder, but I cannot figure out how to load the image from the folder. I've looked at other similar questions os Stack Overflow, but i cannot tell what I am doing differently.
As well, I am trying to make the bottom of the image line up with the bottom of the fixed bar (the class i am using) however it seems to be lining up the image incorrectly (i switched to an online URL to test this). any ideas or help would be greatly appreciated!
edit:
My folder structure for this section is:
Public
bower_components
directives
NavAppPics
city-clipart-black-and-white.gif
styles
styles.css (where the class is)
tpl

Answer 1

EDIT: The filepath must be wrong for your image. Where is the NavAppPics folder located? If it's in the root directory, add a / to front of the URL to tell it start from the root directory rather than the current folder:
background-image: url(/NavAppPics/city-clipart-black-and-white.gif);
As far as aligning the image to the bottom of the div:
background-position: center bottom;
More info about the background-position property:
http://www.w3schools.com/cssref/pr_background-position.asp

Answer 2

The address of the image is relative to the CSS style file.
Since your CSS is at styles/styles.css, the background image is being looked for at styles/NavAppPics/city-clipart-black-and-white.gif.
Specify a relative or absolute path to fix the problem:
background-image: url(/NavAppPics/city-clipart-black-and-white.gif);
Or:
background-image: url(../NavAppPics/city-clipart-black-and-white.gif);