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; }