Question

I tried setting up an example on JSFiddle but it shows an error for some reason: http://jsfiddle.net/t3DDW/

Anyway, here is my css:

body {
    background:
        url("images/bg.gif") repeat 0 0,
        url("images/bg-top.gif") repeat-x 0 0;
    color: #666;
    font: 62.5%/1.5em helvetica, arial, sans-serif;
}

Only the first background image shows. I have double-checked that both image urls are correct. Is there a reason why the second background image isn’t showing up? I tested it both on Chrome and FF and the second bg image doesn’t show.

Answer 1

How do the images look? The stacking order is important. The first will be put on top of the others and so on.

If the first image covers the other image then try to switch the order of the images.

From the source:

The first image in the list is the layer closest to the user, the next
one is painted behind the first, and so on. The background color, if
present, is painted below all of the other layers.

Example from Stacking Order of Multiple Backgrounds:

background:
   url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(Paper-4.png);                      /* On bottom, like z-index: 1; */