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 dont know how big the main content will be, so how do I cut it and place it according to the height ? how many pieces do I need and how do I place them with css?

Can someone explain this to me ?

with kind regards

回答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.

回答2:

I solved it this way:

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

#middle-stripe {
  background: url(" images/bg-middle.png") repeat-y scroll 0 0 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 ?

来源：https://stackoverflow.com/questions/14146489/how-to-place-a-responsive-background-according-to-content-height-with-html-css