I am using a background image on a page on my site which I do not want to repeat. However doing this leaves scrappy white areas where there is no data. I would like to be able to centre the entire page so there is even ammouts of white either side of my page and so that when you adjust the window size on the display the whole page remains in the centre.

the best example of this i can find is the guardian page www.guardian.co.uk

I can get the background image to do this but the text and images remain in position and the page ends up looking stupid.

Can anyone give me some advice? Sorry if i haven't exmplained myself very well

Cheers in advance

You can try using CSS.

body{
text-align: center;
}

Post your URL for any further info.

that is along the right lines but then all my text will be aligned centrally what if I was to align it to the right or left?

Here is what I have so far: it's not a real page just a test I'm working on.

www.youngineurope.com/centre.htm


The images still have the same problem as you can see. If you adjust the size of your window they don't move relatively to the rest of the page.

Hello,


For background images Artic Fox provided a link in this thread that is really slick.

Vivekar's advice is perfect for what you are asking but to answer your question about the text you could create a another rule. Below is an example from one of my sites.

body {
 background: #fff url('bg.gif') no-repeat scroll 50% 50%;
 font: 12px Verdana, Arial, Helvetica, sans-serif; color: #000080; 
 margin: 0 0 10px;
 padding: 0;
 text-align: center;
}
#container {
 border: 1px inset #000;
 width: 750px;
 margin: 0 auto;
 padding: 0;
 text-align: left;
}

On this page I added <div id="container"> immediatley after the body which conatins the entire page. I'm sure there are many ways to accomplish your goal, this one just happened to work for me.

Good luck,

i'm we'll on my way now

thanks for the help

You could also put everything in one giant table and center the table.

<CENTER>
<TABLE cellpadding="0" cellspacing="0" border="0" width="80%">
<TR>
<TD>
All your content
</TD>
</TR>
</TABLE>
</CENTER>

Hope I helped

For some strange reason when I use <P> tags I can adjust the text alignment on each paragraph. I think it is <p align="right, left, centre, justified...">then you text.</P>

cheers

i think the table idea could be the way forward. thanks for the help.

Using DIV's and CSS is the best way because it is more flexible and is the web standard. If you use the CSS code:

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

This solves the centering problem and does not include difficult to manage tables.

For more info check http://www.w3schools.com/css/css_ref...asp#background
it's a great resource

but the text doesn't realign along with the image.

My background image stays in the center but the text doesn't

Dan

Hey Dan,

Try inserting my css I added earlier in the thread, it is exactly what you are looking for for the content alignment, although a few tweaks might be needed. If you want to try it but are unsure how to implement it, please post here and I will work it in for you. It is alot easier than you might think.

Cheers,

<CENTER>
<TABLE cellpadding="0" cellspacing="0" border="0" width="80%">
<TR>
<TD>
All your content
</TD>
</TR>
</TABLE>
</CENTER>

The problem with wrapping all your content in a table is that anything within a table does not show until it is fully loaded. A lot of viewers will see no progress in loading the site and decide to go somewhere else. If it is not wrapped in a table the user can see progress and will be more likely to wait.