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
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/