Help me center a sites background image!

[MattSepeta]

Hey guys... I used to know my way around CSS alright but have grown a bit rusty. I am trying to center a sites background image, and I cant seem to get it to work. Here is one of the code snippets containing the background image:


* {margin: 0px; padding: 0px;}
* html li {vertical-align: bottom;}
* html img {vertical-align: middle;}
* html input {vertical-align: middle;}
body {font-family: Verdana , Georgia ,Arial, Helvetica, sans-serif;font-size:11px; color:#0a0a0a; background:#fff url("images/scripture-music.jpg") no-repeat fixed 0 0; text-align:center;}
input {border: 0px;}
img {border: 0px;}
ul {padding: 0px; margin: 0px;}
li {padding: 0px; margin: 0px; list-style: none;}
* html li {vertical-align: bottom;}
a {color:#575757; text-decoration: none;}
a:hover {color: #999999; text-decoration: none;}
a img{border:medium none;float:left;padding:10px 10px 10px 0;}
p {margin: 0px; padding: 0px;}
.clear {clear: both; height:0px; display:block; font-size:0px;}
.left {float: left;}
.right {float: right;}
.txt-center {text-align: center;}



And here is the other part containing the background image, I am not sure which one to center:


.wrapper { width:940px; margin:auto;clear:both; text-align:left;background: #fff;padding: 0 20px;border: 1px solid #fff;}

#header{float: left;width: 100%;padding-top: 5px;}
.header_left{width: 480px;float: left;}
.header_right{width: 220px;float: right;color: #6e6e6e;text-align: right;padding-right: 25px;font-size: 13px;font-style: italic;}
.logo{ width:100%; height:198px; float:left; background:url(images/soaking-music.jpg) no-repeat 0 0; margin:0px; padding:0px;}
.logo a{ width:940px; height:198px; text-indent:-999999px; display:block;margin:0px; padding:0px;}

.border-line{width:100%;float: left;clear: both;border-top:4px solid #000;background-color: #000;margin-top: 5px;}


#menu{float: left;width: 100%;}
#menu ul{float: left;width: 100%;background-color: #000;}
#menu ul li{list-style-type: none;color: #fff;display: inline;padding: 5px 60px 5px 5px;float: left;font-size: 16px;}
#menu ul li a{color: #fff;}

#main_content{float: left;width: 100%;margin-top: 10px;}



What I am trying to do: I am trying to semi-incorporate the static background into the pager design, so I would like the background image to stay centered in relation to the page content. I want it to stay centered no matter the size of the browser viewing the page, which is not currently happening. Currently, when I resize the browser window viewing the page, the background stays static, and becomes un-centered.

Help!!!!!! Thanks

 

[Dunmail]

This doesn't look right -

body {font-family: Verdana , Georgia ,Arial, Helvetica, sans-serif;font-size:11px; color:#0a0a0a; background:#fff url("images/scripture-music.jpg") no-repeat fixed 0 0; text-align:center;}

The "fixed 0 0" bit locks the background to the top left corner. I think you need

background:#fff url("images/scripture-music.jpg") fixed 50% 0

Alternatively you could use

background:#fff url("images/scripture-music.jpg") fixed centre top

 

[design-is]

This doesn't look right -

The "fixed 0 0" bit locks the background to the top left corner. I think you need
...
Alternatively you could use
...

Yep, that should do the trick...

Let us know if you get stuck.

/Doug