Ik heb een klein probleem

Ik heb twee plaatsje 1 een transparante gif een een jpg plaatje (Met verschillende blauwtinten.)
Ik wil deze plaatjes boven elkaar hebben zodat de en deze twee plaatjes boven elkaar komen te liggen. Nu zie ik alleen nog het gif bestand.
De HTML:
Code:
<tr><td class="navmid" id="header" colspan="2"></td></tr>
Css code (alleen de relevante

):
In style.css dus extern
Code:
#header{background-image:url("images/header.gif");
background-attachment: scroll;}
.navmid{background-image:url("images/header-mid.jpg");
background-attachment: scroll; background-repeat:repeat-x;
padding: 5px 5px 5px 5px;vertical-align: top;height:99;}
Dus samengevat hoe krijg ik deze twee plaatjes in twee verschillende lagen. (En ik wil er geen jpg van maken. Dit omdat er dan gewoon een te grote kwaliteits verlies is (Deze twee vestanden zijn nu 2 kb en dat is mooi klein)
Zelf dacht ik met Z-INDEX:0; en Z-INDEX:1; alleen om rare redenen werkt dit bij mij niet. Nu