How to make 2 bgs repeat?

This is my layout [url]http://www.deliciousmanga.com/demo/[/url]
I have 2 backgrounds one for the left side and one for the right side. As you can see I’m trying to make 2 backgrounds repeat-x so if the user’s screen resolution is wider than 1024px it should stretch along. I managed to do it but my #bg div is making my browser have a horizontal bar which I don’t want. How can I fix this?

[CODE]* {
margin: 0px;
padding: 0px;
}

body {
background-image: url(images/leftbg.jpg);
background-repeat: repeat-x;
background-color: #FBD7C1;
}

#bg {
background-image: url(images/rightbg.jpg);
background-repeat: repeat-x;
float: right;
height: 205px;
position: relative;
left: 1000px;
width: 1000px;
}

#wrapper {
margin: auto;
width: 975px;
}

#header {
background-image: url(images/header.jpg);
height: 205px;
width: 975px;
}

#sidebar {
width: 220px;
background-color: #CA577E;
float: left;
position: relative;
top: -20px;
left: 25px;
padding: 10px;
}

#content {
width: 600px;
background-color: #C93;
float: right;
}
[/CODE]

Also in #CSS _↴