Hey, how do I center a background layout image using CSS? I'd like it to just be centered horizontally but not vertically. I use the <center> HTML tag and it centers completely on the page. :grouch:

body {background-image: url(yourimage.gif);
background-position: top center;}

danggggg.....that didn't work at all.

alrighty i didn't explain myself clearly sorry :buckt:

heres the page -------->http://tinyurl.com/b2ptv. The whole thing is one image and it's the layout of the page. I'd like it so it's (the layout image) centered horizontally and not vertically.

:)

<IMG SRC="circle.gif" STYLE="position:absolute; TOP:0px; LEFT:170px;>

Adjust the 170 to whatever number centers the image.

<IMG SRC="circle.gif" STYLE="position:absolute; TOP:0px; LEFT:170px;>

Adjust the 170 to whatever number centers the image.


nice. :hehe:

So did that solve your problem?

It did for me, but the problem now is it doesn't work properly in 1024x768...people see a huge space on the right side of the page.

There's a more reliable way.

<div style="text-align:center;">
<IMG SRC="circle.gif">
</div>

If you do this for several images, you could redo this as

<div class="center">
<IMG SRC="circle.gif">
</div>

And put in your css this rule:

.center{
text-align:center;
}