How To Place A Responsive Background According To Content Height With Html / Css?

I need to implement this background into my websites main content: the left and right stripe should be responsive and grows in height, if content becomes bigger. The problem is, I

Solution 1:

If you only need height support, cut it into 3 pieces: upper, middle, and bottom. Set the background to the middle part with repeat for y, and place the upper and lower parts in top:0 and bottom:0 respectively, and you should be done.

Solution 2:

I solved it this way:

#content {
position:relative;
}
#left-stripe {
  background: url(" images/bg-top.png") no-repeat scroll 00 transparent;
  height: 85px;
  left: 112px;
  position: absolute;
  width: 90%;
}
#right-stripe {
  background: url(" images/bg-bottom.png") no-repeat scroll 00 transparent;
  height: 85px;
  left: 112px;
  position: absolute;
  width: 90%;
  bottom:0;
}

#middle-stripe {
  background: url(" images/bg-middle.png") repeat-y scroll 00 transparent;
  bottom: 85px;
  top:85px;
  left: 112px;
  position: absolute;
  width: 90%;
}

But I still got the problem, that It is not responsive (if the user scales with his browser, it should move along with it.

so if someone comes on my site and has more than 960px width, it should appear, but not wholely, the rest of the background left and right should be hidden.

Can someone help me make it responsive ?