This drove me crazy once or twice. Sometimes backgrounds and images don't play nice and overlap eachother in unintended ways.  So, you want to set the depth-order to fix this, with the z-index CSS property.

It seems simple enough.  Z-index: 10 is "behind" Z-index: 20 is "behind" Z-index: 50 and so on.  But, give it a shot and it frequently has no effect whatsoever and just seems to not work.  Well, there is just one tidbit of information missing in this equation:

To get Z-Index to work, you must have the DISPLAY property set to either:

position: relative; or position: absolute;
 

ex:  To ensure "div_on_top" stays in front of  "div_underneath"...

 HTML:

<div id="div_on_top">content on top...</div>

<div id="div_underneath">content underneath...</div>

CSS:

#div_on_top {

  position: relative;
  z-index: 20;

}

#div_underneath {

  position: relative;
  z-index: 1;

}


Here's a full explanation: 

https://developer.mozilla.org/En/Understanding_CSS_z-index/The_stacking_context