Need CSS help with my background image and a repeated image

Hey yall

Its been a very long time, but I desperately seek some help here.

I have created a '#container', '#content' and a '#sidebar' div/box for my layout (2Column). See attachment for an example.

If you have a closer look at my layout, your notice a slight change in the top of my design. This is my background image at (1024px x 237px) and needs to align at the top of the '#container' and then use a repeated background image (1024px x 20px) repeats-y all the way down container, so this can fit nicely with my design. Actually, you can't really see the background image, but it does have a slight pattern which fades in with my design

CSS:

#page-wrap #container 		{
	height: auto;
	background-color: transparent;
	background-image: url(../version2/images/content-bg-repeat.jpg);
	background-repeat: repeat-y;
	background-position: left top;

}
#page-wrap #container #sidebar		{
	height: 100%;
	background-position: left top;
	float: right;
	width: 420px;
}
#page-wrap #container content		{
	height: 100%;
	background-position: left top;
	float: left;
	width: 605px;
}

Code (markup):

HTML:

<div id="container">     
  <div id="sidebar">
  <!-- #sidebar --></div>
        
  <div id="content">          
  <!-- #content --></div>
<!-- #container --></div>

HTML:

Can anyone help me please?

Many thanks in advance
CHEERS