Centering Problem

Question

I cant seem to get this to work.

http://www.keironlowe.host56.com

What I need is the banner with the low opacity image on it to be centered no matter the resolution, Ive tried a wrapper but because the wrapper is a width of 800 it cuts of the image, i've tried margin:0 auto; and i've even tried using the tag but it still doesnt center in higher resolutions.

Answer 1

Try taking the centering and pic out of the CSS and into the HTML. the css would look like this:

 #banner {
background-color:#000000;
height:350px;
width:auto;
margin:0 auto;
}

and your HTML would look like this:

<div id="banner">
<center>
<img src=".....">
</center>
</div>

That is what I would do.

Answer 2

First, get rid of that <center> tag you have around the <div id="banner"></div>. You don't need it and it's deprecated.

Then, swap out your current CSS of the following block:

#banner {
background-color:#000000;
background-image:url(../IMG/Banner_BG.png);
background-repeat:no-repeat;
height:350px;
width:auto;
margin:0 auto;
}

For this:

#banner {
background:url("../IMG/Banner_BG.png") center #000000 no-repeat;
height:350px;
margin:0 auto;
}

Swapped out the many background attributes for the shorthand. Since you're showing the image as a background, added in the background-position property of center. This will now bullseye your image into the centre.

Answer 3

You shouldn't need the tags in @Logan's example. That tag is deprecated anyway. Setting a width (not auto) and setting margin-left and margin-right to 'auto' in your stylesheet should handle the centering just fine.