Bring multiple background element to the front

Question

I'm currently working on a hobby website, and I'm trying to accomplish something which seems way more advanced that it should be, I hope you can help me.

I wish to bring a background element, du the foreground (Because a little bit of it should reach on top of the menu line)

I am using the CSS3 multiple background method, to use 3 different background elements. I have included the code and an image to show what I man.

Cheers

background-image:url(logo.png), url(shinybg.png), url(bgpat.jpg);
background-repeat:no-repeat, no-repeat, repeat;
background-position:top center, top 18px center, top left;
height:1000px;
padding-top:10px;
z-index:-1

Image: http://goo.gl/JEvhAz

EDIT: Okay so it seems I fixed it. I made the img tag outside of my wrapper and made it position absolute, the way to center it was as follow:

#logotop {
    width: 905px;
    margin: 0 auto;
    margin-top:-18px;
    position:absolute;
    left:0;
    right:0;
}

The left and right 0 together with the margin 0 auto fixed it, cheers lads

Answer 1

Put your header image/logo into a new <img> tag that is placed on top of your page. This will give you much more control over positioning than what you're currently doing, and will allow you to use z-index.

If you're comfortable with HTML/CSS, I'd recommend creating a header <div> and set the background on that div (and also the z-index). This will allow you more options further down the line but the simpler option is to use the <img> tag.

Here is a jsFiddle with some examples that might help you: http://jsfiddle.net/tMhs7/1/