yes, make a very wide image. Start with your desired width and column division and then add say 800px on either side of the image (right side lighter, left side darker). Then simply center the image (the column should be offset to where you want). As the browser is resized more or less of the image is revealed.
I left the image at 100px height because your bigger square background has thicker lines every 100px; But if it was a simpler design, you could easily do a 1px height background image. Then just do background-repeat: repeat-y; (Repeat vertically only).
Yeah, JS… I guess you need to apply the general background to the whole page like I did and then the sidebar background needs applied with JS to measure the distance between the sidebar and the left side to calculate % and adjust the css.