Centering a bg image question

I’m trying to center a large bg image on my site so it looks and scrolls like this site:

but can’t figure it out. Here’s what mine looks like:
http://newsite.site90.net/index.php

Here’s my css for the image:

#body-content {
position:relative;
background-attachment:scroll;
background: #ffffff url(…/images/paper_back.jpg) top center repeat-y;

width:1658px;
height: 1410px;
border:0px solid #000000;

}

I tried making the background-position like “-30%” to try to center it and make it scroll like the Pala site but couldn’t get it to work. Any suggestions?

Thank you.

okay, thank you

Hi,

I’m not sure what you are asking as both are scrolling together.

You can’t really use a height for those borders anyway as that is a fragile approach that will either break when resized or gives massive vertical scrollbars.

You should do something like this (see faq on 100% height).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1,h2,h3,h4,h5,h6,p{margin:0 0 1em}
html, body {
    height:100%;
    margin:0;
    padding:0;
}
body{   
 background:url(http://newsite.site90.net/images/big_bg.jpg) repeat 0 0;
}
#outer {
    width:858px;
    padding:0 40px;
    margin:auto;
    background:url(http://newsite.site90.net/images/paper_bg.jpg) repeat-y 0 0;
    min-height:100%;
}
* html #outer {
    height:100%
}

body:before {/*Opera Fix*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
#outer:after {/* ie8 fix*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
</style>
</head>
<body>
<div id="outer">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>
</body>
</html>



If you want the middle to scroll and the background stationary then add “fixed” here.


body {
  background:url(http://newsite.site90.net/images/big_bg.jpg) fixed repeat 0 0;
}

I’ve now abandoned that idea and have two background images but I would still like the background image at the back to scroll with the other one instead of remaining stationery. Here’s my new css:

html, body {

margin:0px;
padding:0px;
font:small-caps 1em "Times New Roman", Times, serif;
letter-spacing:.2em;
color:#000000;

background: #ffffff url(../images/big_bg.jpg)  repeat;
background-attachment:scroll;

}

#body-center {
text-align:center;}

#body {
position: relative;
width: 938px;
height:1400px;
margin-left: auto;
margin-right: auto;
text-align:left;
padding-bottom:0px;
border:0px solid #000000;
}

#body-content {
position:relative;
background: #ffffff url(…/images/paper_bg.jpg) repeat-y;
width:938px;
height: 1410px;
border:0px solid #000000;
}

Anyone know how I could do it?