How to implement multi piece page background that is behind a content background in HTML/CSS without Javascript? -

I have trouble implementing this design I was given in HTML / CSS here. Psd is:

Even the code is:

Here are some visual notes:

I am now stuck where I used the situation : For relative #content-background, it leaves a big vacancy after the position of my place. A friend suggested that the page be separated with full position on the background elements, but did not make much progress.

How can this be done from my current perspective? Or if my view is wrong, then what is the correct approach?

Just do something like this:

  & lt; Html & gt; & Lt; Top & gt; & Lt; Style & gt; #a, #b, #s {background-repeat: repeat-x;} # a {background-image: url (http://dev.enhancetrade.com/prodetails/images/slider-background-5x5.jpg); Background-position: center top;} # c {background: white; Width: 400px; Margin: 0 px auto;} #b {background-image: url (http://dev.enhancetrade.com/prodetails/images/slider-background-5x5.jpg); Background-position: center down;} & lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "a" & gt; & Lt; Div id = "b" & gt; & Lt; Div id = "c" & gt; Ad lifphisiface ad lifaphizs & lt; P & amp ;; Asdjfoiajoiafeoi & lt; / P & gt; & Lt; P & gt; Asdjfoiajoiafeoi & lt; / P & gt; & Lt; P & gt; Asdjfoiajoiafeoi & lt; / P & gt; & Lt; P & gt; Asdjfoiajoiafeoi & lt; / P & gt; & Lt; P & gt; Asdjfoiajoiafeoi & lt; / P & gt; & Lt; P & gt; Asdjfoiajoiafeoi & lt; / P & gt; & Lt; P & gt; Asdjfoiajoiafeoi & lt; / P & gt; & Lt; P & gt; Asdjfoiajoiafeoi & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;