Instead of trying to stretch the image, use a "sliver" of it that can be repeated over and over so that it fills the page. It is difficult sometimes to get it to line up, but it will reduce the size of the image and reduce the time it takes to load.
For instance, make a sliver of the polkadot image. It can either be horizontal, vertical, or a rectangle. It doesn't matter as long as when you place the exact same image next to itself it lines up (in this case, the polka dots. Then in your stylesheet add repeat-x (to repeat across the page) or repeat-y (to repeat down the page), or both (if it is a rectangle).
You can make this the background image for the BODY class.
BODY {
background-image: url('images/polkadot-sliver.gif'); background-repeat: repeat-x;
}
(Be aware may be other things lurking in your css that manipulate the "body"... like
HTML,BODY {
MARGIN: 0px;
PADDING: 0px;
BACKGROUND-COLOR: #FFFFFF;
}
If you resize the new-bg2.gif I cropped to the 700px wide and 24px high that it should be, you should be able to use that as the background for the TD.Container class and it should work for the center section of your site (up tp 700px - you may want to make it wider, say 800px - I just used what you had already). Add the repeat-y to your stylesheet and it should fill the table cell (TD) with your scroll image.
TD.Container {
VERTICAL-ALIGN: top;
background-image: url('images/new-bg2.gif'); background-repeat: repeat-y;
}
You may still have to play with margins but it is a start.
As for "category boxes etc . that move all over the place", that is something else. Don't try to manipulate the columns or boxes, manipulate the images.
EDIT - one other thing. There is a website at
http://www.w3schools.com/ that explains all of this. They even let you experiment with it, and best of all... it is FREE!