Background Image problem

[zimmo]

I have a problem that I just cannot figure out.

Scenario
I want to have my site have 2 background images, one for the actual html (THE WHOLE BROWSER WINDOW) which I created an image 20 pixels wide x 2500 high, so it accounts for most used screen resoltuions.

Then I need to have a second image within the pagediv (container) ( think that is correct place to have it) that fills the width of the actual page, I have my page set for 940 pixels wide.

Now I can acheive this fine by placing the second image in the css style sheet for my page container.

But the problem that happens is the page goes beyond the window height, and when you scroll down at the point of the end of your window, the background image is cropped off. It seems that it is finishing at the end of my window.

How can I stop this so that it is the actual lenght of the window with teh scroll.

A link to the page where if you scroll it cuts off the lilac colour: <>

The css code for my html/body and page div.

html { height:100% }
body 
{
margin: 0px;
background-color: #CCCCFF;
background-image: url(inc/grnd.gif);
background-repeat: repeat-x;
height: 100%
}
#PageDiv {
position:relative;
width: 940px;
margin:0px auto;
background-image: url(inc/grnd2.gif);
background-repeat: repeat-x;
height: 100%
}

[edited by: SuzyUK at 4:40 pm (utc) on April 24, 2008]
[edit reason] Please no links, per charter [/edit]

[4css]

I think your problem could be that you have the image 2500 pixels high.

Your image should be smaller and you should be using background-repeat: repeat-x; this for horizontal
background-repeat: repeat-y; this for vertical
Which you do have in your styles.

Do a google on background images tutorials, you will come across some really good information

[Guki]

The problem is that #pagediv 's height shouldn't be set as 100%.Delete the height setting,it will be OK.Try it.

[zimmo]

Hi

When you delete the height, or even change it to auto, the background completely dissappears and nothing is shown. That is the problem i have had.

[Guki]

zimmo,

delete the height,then set flot:left,dont forget to set the width...
Just change it to a block elmt.

[Guki]

oh,sorry,i make a misstake..you also want it center.

my english is poor,maybe write the codes down is quikly:

#PageDiv {
position:relative;
width: 940px;
margin:0px auto;
background-image: url(inc/grnd2.gif);
background-repeat: repeat-x;
}

#mainbox{float:left, width:940px; margin:0; padding:0;}

then put the mainbox into #pagediv....

[edited by: Guki at 5:29 pm (utc) on April 24, 2008]