Centering Background Image

[bclaypole]

Can someone please provide a code to get my background picture to automatically center itself regardless of what resolution the viewers computer is set to.
I know that there will be black boarders where the background image runs out of pixels, but I'm ok with that. Right now it only runs out on the right on higher resolution screens and I would much rather perfer it be balanced.
http://www.pbase.com/bclaypole

Thanks
Brad

CSS Code is:

BODY
{
background-image: url('http://www.pbase.com/image/107671764/original.jpg');
background-repeat: no-repeat; text-align: center;
color: white;
background-color: #000000;
font-size: 7pt;
}

DIV,TH,TR,TABLE,FONT,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5,FONT, CENTER
{ font-family: verdana, arial, sans-serif;
font-size: 10pt;
color: white;
}
font
{
color: #AAAAAA;
letter-spacing: 3px;
}

h2
{
font-size: 12pt;
font-weight: normal;
text-align: center;
letter-spacing: 10px;
padding-top: 15px;
padding-bottom: 15px;
margin-left: 0px;
margin-right: 0px;
background-color: black;
}

h2:first-letter
{
color: #AAAAAA;
}

h4
{
color: orange;
font-size: 13pt;
}

I
{
color: #888888;
font-style: normal;

}

INPUT, TEXTAREA
{ border-color: #003366;
border-style; none;
background-color: Black;
font-family: verdana, arial, sans-serif;
font-size: 10pt;
color: white;
font-weight: bold;
}

TEXTAREA
{ background-color: #EEEEEE;
font-family: arial;
color: black;
scrollbar-base-color: #003366;
scrollbar-3dlight-color: black;
scrollbar-highlight-color: none;
scrollbar-track-color: #003366;
scrollbar-arrow-color:white;
scrollbar-shadow-color: #003366;
scrollbar-dark-shadow-color: #003366;
}


A, TD.A, A:link
{ color: #FFCC00;
text-decoration: none;
}

A:hover
{
color: red;
text-decoration: underline;
}

A:visited
{
color: #FFCC66;
}

A:active { color : #d5ae83}

.caption
{
font-size : 9pt;
color : #44dd44;
font-style : italic;
}

TD
{
background-color: none;
}

TD.thumbnail
{
background-color: ;
padding: 5px;
vertical-align: middle;
width: 200px;
}

.thumbnail
{
border-color: #666666;
border-width: 4px;
}

.display
{
border: 8px RIDGE #999999;
background-color: black;
}

BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }




BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }

[dang]

Hi Brad,
You should be able to add centering as such:

Code: Select all

background-image: url('http://www.pbase.com/image/107671764/original.jpg') top center;

But beware, the dimension (1102px) and file size (557.63 KB) of your photo could be problematic for anyone using small screen resolution or slow connections. It's generally better to add a repeating background of small size. Here's a speed test of your page:
Web Page Speed Report - http://www.websiteoptimization.com/services/analyze/

URL: http://www.pbase.com/bclaypole
Title: Brad Claypole's Photo Galleries at pbase.com
Date: Report run on Fri Jan 2 18:29:25EST2009

Diagnosis
Global Statistics
Total HTTP Requests: 41
Total Size: 835447 bytes
Object Size Totals
Object type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds)
HTML: 12589 2.71 0.27
HTML Images: 229744 51.39 6.82
CSS Images: 573439 115.69 4.44
Total Images: 803183 167.08 11.26
Javascript: 12915 3.17 0.67
CSS: 6760 1.75 0.44
Multimedia: 0 0.00 0.00
Other: 0 0.00 0.00

External Objects
External Object QTY
Total HTML: 1
Total HTML Images: 28
Total CSS Images: 7
Total Images: 35
Total Scripts: 3
Total CSS imports: 2
Total Frames: 0
Total Iframes: 0

Download Times*
Connection Rate Download Time
14.4K 655.71 seconds
28.8K 331.96 seconds
33.6K 285.71 seconds
56K 174.70 seconds
ISDN 128K 59.19 seconds
T1 1.44Mbps 12.63 seconds

*Note that these download times are based on the full connection rate for ISDN and T1 connections. Modem connections (56Kbps or less) are corrected by a packet loss factor of 0.7. All download times include delays due to round-trip latency with an average of 0.2 seconds per object. With 41 total objects for this page, that computes to a total lag time due to latency of 8.2 seconds. Note also that this download time calculation does not take into account delays due to XHTML parsing and rendering.