Conexión de fondos repetibles y no repetibles sin una costura

Question

Tengo un fondo 700x300 que se repite perfectamente dentro del contenido principal div. Ahora me gustaría adjuntar un div en la parte inferior de content-div, que contiene una imagen de fondo diferente que no es repetible, que se conecta sin problemas con el fondo repetible que se encuentra encima. Esencialmente, la imagen no repetible se verá como la pieza final de la imagen repetible.

Debido a la naturaleza del patrón, a menos que la altura completa de 300px de la imagen de fondo sea visible en la última repetición del fondo del contenido-div, el fondo en el siguiente divisor no se conectará a la perfección. Básicamente, necesito que la altura de div del contenido sea un múltiplo de 300 px en todas las circunstancias. ¿Cuál es un buen enfoque para este tipo de problema?

He intentado cambiar el tamaño del contenido-div sobre la carga de la página, pero esto sólo funciona siempre y cuando el div contenido no contiene ningún cambio de tamaño, contenido dinámico, que no es mi caso:

function adjustContentHeight() 
{ 
    // Setting content div's height to nearest upper multiple of column backgrounds height, 
    // forcing it not to be cut-off when repeated. 

    var contentBgHeight = 300; 
    var contentHeight = $("#content").height(); 
    var adjustedHeight = Math.ceil(contentHeight/contentBgHeight); 

    $("#content").height(adjustedHeight * contentBgHeight); 
} 

$(document).ready(adjustContentHeight); 

Lo que estoy buscando es una forma de responder a un evento de cambio de tamaño de div, pero hay doesn't seem to be such a thing. Además, asuma que no tengo acceso a la JS que controla el cambio de tamaño del contenido en el contenido-div, aunque esta es potencialmente una forma de resolver el problema.

Otra posible solución que estaba pensando era compensar la imagen de fondo en la div inferior en una cierta cantidad dependiendo de la altura del contenido-div. De nuevo, la pieza faltante parece ser la capacidad de responder a un evento de cambio de tamaño.

Answer 1

Otro enfoque es calcular el estilo background-position para los DIV inferiores y superiores en función del tamaño del contenido DIV. Puede usar posiciones negativas para alinear la parte inferior de una con la parte superior de la otra.

Otro enfoque más es utilizar un enfoque DIV en capas en el que la parte superior, el contenido y el fondo son todos hijos de un DIV padre que contiene el fondo.

El beneficio de estos enfoques es que no cambia la representación natural del contenido DIV simplemente para gestionar el fondo.

Ejemplo: http://bin.googlecode.com/svn/trunk/css/repeating-bg-content.html

Answer 2

Podría establecer background-position: fixed en su ayuda css? Entonces su div inferior podría moverse, pero su imagen de fondo permanecería fija en relación con la parte superior de la página. A medida que se revela más de su imagen repetitiva, se ocultará más de su imagen inferior.

Esto vendría bajo el título de "compensar la imagen de fondo en la parte inferior div por una cierta cantidad dependiendo de la altura del contenido-div", en lugar de "la altura del contenido div ser un múltiplo de 300 px debajo de todo circunstancias".

Answer 3

Usted podría intentar agregar un event listener a la div:

     var div = document.getElementById("content"); 
     div.addEventListener("resize", adjustContentHeight, false); 

Answer 4

Si nada tiene que coincidir en la parte superior, la posición de la imagen de la repetición en la parte inferior de la div (por lo que el desbordamiento se derramará sobre la tapa) De esta manera:

div#repeating { background: transparent url('/path/to/image') repeat left bottom; }