CSS Problem - Background repeat & Max/Min Width

Question

I have the problem at lower resolutions that the content div sticks out of the main document.
Or in fact, the content isnt sticking out, its the background repeat that is in the right of the screen thats pushed into the doc.
And also the background repeat isnt always repeating till bottom. It doesnt matter how big a negative margin is.
How can i let the background repeat right stick to the end of the document instead of the width of screen?
How can i let the repeat continue so it goeas all the way down?
Here's the CSS:
@charset "utf-8";
/* CSS Document */
/* Main Floats */
html,body {
     height:auto;
     min-width:800px;
     width:auto;
     background: #FFFFFF url(../Art/Background.png) no-repeat center;
     background-attachment:fixed;
     color:#000;
     margin:auto;
#BackGrRepeat1{
     float:right;
     height:auto;
     width:auto;
     min-width:800px;
     background: transparent url(../Art/greenfade_right.png) repeat-y right top;
     background-attachment:fixed;
     margin-right:-0px;
     margin-top:-10px;
     margin-bottom:-150px;
#BackGrRepeat2{
     float:left;
     height:auto;
     width:auto;
     min-width:800px;
     background: transparent url(../Art/greenfade_left.png) repeat-y left top;
     background-attachment:fixed;
     margin-left:-0px;
     margin-top:-10px;
     margin-bottom:-150px;
#WContainer{
     margin: 10px auto;
     width:80%;
     background:none;
     min-height:50%;
     line-height: 130%;
#WHeader{
     padding: .5em;
.TabbedPanelsContentGroup{
     min-width:600px;
.VTabbedPanels .TabbedPanelsTabGroup {
     float: left;
     width: 172px;
     background: none;
     margin: 0;
     margin-left:-3em;;
.VTabbedPanels .TabbedPanelsContentGroup {
     margin-left: 172px;
     min-height:18em;
     padding: 2em;
     border-left: solid 1px #999;
     border-bottom: solid 2px #999;
     border-top: solid 1px #999;
     border-right: solid 2px #999;
#WFooter{
     clear: both;
     margin: 0;
     padding: .5em;
/* Text Styles */
h1{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#05692E;
font-weight: bold;
font-style:italic;
font-size: 3em;
line-height:105%;
h2{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#078330;
font-weight: bold;
font-size: 2em;
line-height:105%;
p{
font-family: "Verdana", verdana, arial, helvetica, sans-serif;
font-size: 1em;
margin-top: 0;
.small{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
font-size: .7em;
text-align:center;
/* Menu Buttons */
.TabbedPanelsTabGroup ul{
list-style-type: none;
padding: 0px;
margin: 0px;
.TabbedPanelsTabGroup li{
list-style-type: none;
padding: 0px;
margin: 0px;
.Button a{display:block;}
.Button a:hover{background-position:left bottom;}
a.Button {display:none}
/* Text Images */
.floatright
float: right;
width: 100%;
margin: 5px auto;
background-color: #fff;
padding: 5px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
div.floatright img
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
.floatleft
float: left;
width: 100%;
margin: 5px auto;
background-color: #fff;
padding: 5px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
div.floatleft img
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
/* Message Screens */
#message{
     margin: 50px;
     min-height:18em;
     padding: 2em;
     border-left: solid 1px #999;
     border-bottom: solid 2px #999;
     border-top: solid 1px #999;
     border-right: solid 2px #999;

Answer 1

I think you're going about this the wrong way.  When you float content, it is removed from the normal flow. That's why your floated right background doesn't reach page bottom.
Look at this DEMO of a centered liquid layout page.View source in browser.
http://alt-web.com/TEMPLATES/CSS2-Liquid-Page.shtml
Using my demo as an example, you could place a repeating, solid light-green image in the body to give the page its borders.  Add another repeating background to the #wrapper division.
Add a 3rd background image or light color to the #content division.
Use floats for sidebar content only.
Hope this helps.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com