CSS Background for a div will only display color, not the image

Question

When I apply a CSS background to my div tag, the color will work but the background-image will not display.

I want the background-image to be repeated across the bottom of my divs, but even if I only apply background-image: url('assets/shadow.png'); without position, repeat, or background-color, it will still not show up. Only white is displayed.

But if I apply background-color: #ECECFB; the background-color WILL show up correctly in the background.

Why doesn't background-image work?

CSS

#slider-container,#footer-container,#main aside {
    background-color: #ECECFB;
    background-image: url('assets/shadow.png');
    background-repeat: repeat-x;
    background-position: bottom;
}

The image is linked correctly. Image is 15px by 12px.

I tried shorthand CSS background and only color was displayed.

Answer 1

Look at my fiddle below, notice it works fine. If the image does not download (i.e. bad url) then the background colour will only appear. Check the location or the network tab on chrome dev tools to see if the background image is not being loaded (404).

<div class="foo"></div>
.foo {
 background-color: red;
 background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
 background-repeat: repeat-x;
 background-position: bottom;
 height: 500px;
 width: 500px;   
}​

http://jsfiddle.net/rlemon/XCbK4/