CSS Help! Banner position

Factual Questions
1

Argh! this is driving me nuts, perhaps you guys can help me out.

I’m working on a web page, the back ground of which is just plain black with a repeating image running accross the top only (it’s a red design fading into the black). My CSS code for that:

body { background-color: black; background-image: url(…/webimages/header_bg.jpg); background-repeat: repeat-x; background-attachment: fixed; text-align: center; }

I want to place a banner on top of this, and I want it to be FLUSH with the top of the page and centered. If all I do is add the image the banner will show up cenetered and at the top of the page BUT it is NOT flush with the top of the page.

The banner needs to be flush with the top, because it includes elements of the background. If it’s not flush with the top you can tell as the elements of the background in the banner do not match up with the actual background.

Any suggestions?

2

Add to your body designation:

margin: 0;
padding: 0;
However, since your already have text-align: center; for the body tag, everything on the page will be centered, unless uou have a subsequent tag changing that.

Do you have a URL where folks can see what you are attempting to do?

3

It’s bad form to have “text-align:center” in your body tag, unless you truly want EVERYTHING to be centered. Most of the time, you’ll have to clutter your style sheet with endless “text-align:left” to undo the damage the “center” did to your body tag.

As Duckster noted, you should add 0 padding and margin to your body tag, and the image will be flush with the top. Do this to center it:

<img src=“banner.gif” class=“bannerImg”>

Then, in your style:

.bannerImg {
position:relative;
margin:0 auto;
}

That should center it properly. Use it in good health.

4

Actually there is a much simplier work around for that, using this example, from CSS guru Dan Cederholm.

5

Thanks for the responses so far. However setting the body margin and padding to 0 is still not solving the problem. I don’t have the page up on a server yet, but I will tonight. I’ll post a link then, and hopefully you guys can help at that time! :slight_smile:

6

Wow, never even thought of that! It does seem like an intuitive way to get that accomplished.

Kinthalis: post the address when you can and we’ll take a look. It’s hard to troubleshoot without seeing it.