无法将图像叠加在另一个图像上

Question

I am looking for some help. I have built a site where I want to have a patterned background image (works fine) but, I want to have a border image on top of the background image across the top.

I have tried using position: absolute and setting the z-index on each element but each time it cuts the background image in half and doesn't overlay at all.

Help!

Here's the code I have so far. I am new to coding so excuse any poor code!

body {
color:#787371;
background:url(images/line-top.png) repeat-x top;
position: absolute; 
z-index: 1;
}

#bodychild {
background:url(images/bg-body.jpg);
border:0;
position: absolute;
z-index: 10;
}

Answer 1

use multiple backgrounds:

body {
background: 
url(http://subtlepatterns.com/patterns/dark_fish_skin.png) center top repeat-x,
url(http://subtlepatterns.com/patterns/food.png) center top repeat;
}

more info: http://css-tricks.com/stacking-order-of-multiple-backgrounds/