Box repetible debajo del contenido

[Oscor]

Uhm como explicarlo... Lo que necesito es saber cómo hacer que una caja sea repetible hasta cierto punto, mostrando adelante el contenido (noticias, articulos, etc)
Como sea, con las imagenes y codigo entenderán a lo que me refiero.



Asi está actualmente:

Lo que quiero es que el 'back-content_mid' sea repetible hasta 'back-content_foot' pasando por debajo de las cajas del content (top, mid y foot content)

Por lo menos que quede así:


Luego de tener eso, ya es más facil. En los content lo configuraré con Cutenews o Fusionews que está la opción de agregar los top, mid y footer content.
Aquí un ejemplo final:


Ahora el codigo HTML y CSS

Código HTML:

<div>
 <div class="back-content_top"></div>
 <div class="back-content_mid"></div>
 <div class="back-content_foot"></div>
</div>
<div>
 <div class="top-content"></div>
 <div class="mid-content"></div>
 <div class="foot-content"></div>
</div>
 

Código CSS:

.back-content_top {
  width:902px;
  height:18px;
  position:absolute;
  top:609px;
  left:190px;
  z-index:8;
  background-image: url(files/top-back.png);
  }
.back-content_mid {
  width:902px;
  height:6px;
  position:absolute;
  top:627px;
  left:190px;
  z-index:9;
  background-image: url(files/mid-back.png);
  background-repeat: repeat-y;
 
  }
.back-content_foot {
  width:902px;
  height:17px;
  position:absolute;
  top:1293px;
  left:190px;
  z-index:10;
  background-image: url(files/foot-back.png);
  }
.top-content {
  width:543px;
  height:22px;
  position:absolute;
  top:627px;
  left:213px;
  z-index:11;
  background-image: url(files/top-content.png);
  }
.mid-content {
  width:543px;
  height:2px;
  position:absolute;
  top:649px;
  left:213px;
  z-index:12;
  background-image: url(files/mid-content.png);
  }
.foot-content {
  width:543px;
  height:22px;
  position:absolute;
  top:1216px;
  left:213px;
  z-index:13;
  background-image: url(files/foot-content.png);
  }
 

Mi petición es saber las etiquetas que faltan, que sobran y el orden de estas.
De antemano gracias por darte el tiempo de leer.

[pzin]

Bienvenido al foro Oscor.

Lo más conveniente sería usar una imagen para el borde del elemento con border-image. En CSS Tricks tienen un artículo que explica bastante bien su funcionamiento.

Adicionalmente el uso de posiciones absolutas es una muy mala práctica en el desarrollo web. Es el peor error, y últimamente el más extendido, en la gente que empieza.

[Rafael]

Aunque específicamente el problema es que si no tienes contenido se colapsan.

Podrías jugar con varias cosas.
1) No utilizar 3 divs separdos, sino quiza los top y bottom como imágenes dentro del mismo div.
2) Quizá usar multiple backgrounds, alineados arriba y abajo respectivamente.

- Sus contras serán que robablemente no podrían ser transparentes.

Para que no colapse tan fácil creo que se puede usar overflow: hidden, y también podrías usar un min-height: 100px; digamos.

Lo que entiendo de tu código es que básicamente tienes que anidar los divs.

Código HTML:

<div>
<div>
 <div class="back-content_top"></div>
 <div class="back-content_mid">
 
<div>
 <div class="top-content"></div>
 <div class="mid-content"></div>
 <div class="foot-content"></div>
</div>
 
</div>
 <div class="back-content_foot"></div>
</div>
 

Podrias usar las imágenes directo:

Código HTML:

<div>
<div>
 <img src="back-content_top.png">
 
 <div class="mid-content">
Texto y hacer lo mismo aquí dentro
</div>
 
<img src="back-content_foot.png">
</div>
 

Pero realmente creo que lo puedes simplificar así:

Código HTML:

<div class="back-content">
 
<div class="content">
Texto
 </div>
 
</div>
 

Y juegas con los multiple backgrounds. Estudia esto:
http://www.css3.info/preview/multiple-backgrounds/

Aunque también, viendo tu dibujo, podrás integrar los dos diseños (back y mid) en un solo estilo de imagen.

[Oscor]

Gracias a los dos por su inmediata respuesta y critica constructiva. La verdad pzin me atrapaste con las posiciones absolutas y lamento mi tardada respuesta, he tenido cosas que hacer en todo este tiempo.

pzin leí tu articulo, y me pareció interesante. Solo que no puedo aplicarlo en lo que yo quiero.
El que se acercó más fue Rafael, que fue más asunto de anillar los divs.
Ya pude colocar el mid back en modo repetible-y abarcando todo el contenido principal y la parte de las redes sociales.
El único problema es que el back-footer que queda encima del back-mid.

Código HTML:

<div>
 <div class="back-content_top"></div>
 <div class="back-content_mid">
 
<div>
 <div class="top-content"></div>
 <div class="mid-content">Texto</div>
 
 <div class="social"></div>
 
</div>
<div class="back-content_foot"></div>
</div> 
 
</div>