Positioning a center bg / header

I have placed a background image for my header and ontop of that background I would like a center image so I placed the following code in header.php file:

<div id=“top-center-bg”></div>

and then this in the css file:

#top-center { background: url(images/blue/top-center-bg.png) no-repeat center 10px; width: 960px; height: 500px; }

The problem is that the center background is now pushing the heading text and images too far down. How can I fix this?

This isn’t enough information to go on. A background image doesn’t push anything anywhere, so presumably the “top-center-bg” div is what you mean? We need to see this in context. If that is an extra div in the header, you could set it to position: absolute and add position: relative to the main herder div. Then you’d have to position the new div where you want it. But this is just a guess.

oops sorry I meant to add the url:


I tried adding position: absolute with some variations but I don’t think I’m doing it right as nothing comes as it should be

If there’s a “top-center-bg” div on that page, then I’m a blind monkey’s uncle. :stuck_out_tongue:

Sorry, I can’t find it.

sorry again, the id is #top-center

Why not put that background image on the #container div instead? then you don’t need the height on the top-center div.

yea, getting to understand it a little more now. I have put it in the container but there are different containers for the top header and the slider, so what if I want that image in the background from the top ( of the header ) to the bottom of the slider?

You could wrap a div around .container and #featured and add the bg image to that.