How do I center an image...

[Max Headroom]

How do I center an image that is using the 'background-image:' element of CSS? I have tried this:

.title {
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
width: 554px;
height: 83px;
background-image: url(./images/title.png);
}

and this:

.title {
text-align:center;
display:block;
width: 554px;
height: 83px;
background-image: url(./images/title.png);
}

But neither of them work. They all just align to the left. Thanks for any help.

[NogDog]

background-position: 50% 50%;

See http://www.w3.org/TR/CSS21/colors.html#propdef-background-position for more info.

[misteralexander]

Hey, it's real easy & I'm glad to see you using CSS and NOT tables for your layout.


<style type="text/css">
body
{
background-image:url(/images/background.gif);
background-repeat:no-repeat;
background-position:center;
}
</style>


I hope that helps.

[Max Headroom]

Thanks for the help, but the way that I got it to work was:

.title {
margin: auto;
width: 554px;
height: 83px;
background-image: url(./images/title.png);
}

[vicpal25]

you can also use:

background-position: center;