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.background-position: 50% 50%;
See <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">http://www.w3.org/TR/CSS21/colors.html# ... d-position</a><!-- m --> for more info.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.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);
}you can also use:
background-position: center;
.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.background-position: 50% 50%;
See <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">http://www.w3.org/TR/CSS21/colors.html# ... d-position</a><!-- m --> for more info.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.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);
}you can also use:
background-position: center;