Centering a bg image question

HTML & CSS
1

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.

2

okay, thank you

3

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

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?