So I came across CSS-Tricks and I downloaded the videos I needed from iTunes, right?
Wait first let me tell you that I am NO ‘coder’. I am a photoshop junkie. I know how to design stuff but have no idea (I’m learning as I go along) to actually put a designed page online.
I’m designing the theme for my WordPress Blog using the videos that I found here.
One video, I think it was the first or second one, shows you in general how to slice a piece of the header, body-bg, and make it stretch throughout the page window. At some point I got that to work. Then in another video, it shows you how to take the main header-bg file and put it over top of that.
When I use these two things together, either I get just the body-bg effect to work, or I get the body-bg effect to work but it’s OVER TOP the header-bg image so you only see the top portion of it.
I don’t know how to fix this.
Right now the only way I could get the header-bg graphic to show up was to repeat-x and take out the body-bg effect. I don’t want it to do that either though.
Your CSS looks like you have borrowed someone elses? I mean it has a lot of divs your HTML does not etc. You don’t need to copy someones code to make it work, in matter of fact if you do it would probably work worse. Just get tips and hints about stuff.
If you watch a video and it says "One method to make it work would be…" then you dont think "Oh, cool, now I know.", but "Ok, I can do that, I could also apply it in coding this, and maybe it could even work for that other thing". You know what I mean?
For me it seems you have taken a CSS code (maybe out of Chris’s wordpress theme podcast?) and then started to make your HTML and design to somehow fit into it.
What you need to do is write HTML and CSS yourself, at the same time. Look at the page and start from top and go all the way to bottom. "How could I make the header work? It includes search and menu. To make it work I would need 2 divs positioned like that and to make it visually appealing I need to get these images from my PSD."
And then start working at it.
As for your problem.. you have placed your header bg stuff into "H1#logo", but it should be at "#top-bar". That should fix the problem for you.