Connessione di sfondi ripetibili e non ripetibili senza una giuntura

Question

Ho uno sfondo 700x300 che si ripete perfettamente all'interno del contenuto principale-div. Ora mi piacerebbe allegare un div al fondo del content-div, contenente un'immagine di sfondo diversa che non è ripetibile, collegando perfettamente con lo sfondo ripetibile sopra di esso. In sostanza, l'immagine non ripetibile apparirà come il pezzo finale dell'immagine ripetibile.

A causa della natura del motivo, a meno che non sia visibile l'intera altezza di 300 px dell'immagine di sfondo nell'ultima ripetizione del backround del content-div, lo sfondo nel div in basso non si collegherà perfettamente. Fondamentalmente, ho bisogno che l'altezza del div del contenuto sia un multiplo di 300 px in tutte le circostanze. Qual è un buon approccio a questo tipo di problema?

ho provato il ridimensionamento del contenuto cedola il caricamento della pagina, ma questo funziona solo fino a quando il contenuto div non contiene alcun ridimensionamento, contenuti dinamici, che non è il mio 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); 

Quello che sto cercando è un modo per rispondere a un evento di ridimensionamento div, ma c'è doesn't seem to be such a thing. Inoltre, si supponga di non avere accesso al JS che controlla il ridimensionamento del contenuto nel content-div, sebbene questo sia potenzialmente un modo per risolvere il problema.

Un'altra soluzione potenziale che stavo pensando era quella di compensare l'immagine di sfondo nel div inferiore di una certa quantità a seconda dell'altezza del contenuto-div. Di nuovo, il pezzo mancante sembra essere la capacità di rispondere a un evento di ridimensionamento.

Answer 1

Un altro approccio consiste nel calcolare lo stile background-position per i DIV in basso e in alto in base alle dimensioni del contenuto DIV. È possibile utilizzare posizioni negative per allineare il fondo di uno all'inizio di un altro.

Un altro approccio consiste nell'utilizzare un approccio DIV con livelli in cui il top, il contenuto e il fondo sono tutti figli di un DIV principale che contiene lo sfondo.

Il vantaggio di questi approcci è che non modifica il rendering naturale del contenuto DIV semplicemente per la gestione dello sfondo.

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

Answer 2

Potrebbe impostazione background-position: fixed nel vostro aiuto css? Quindi il tuo div bottom potrebbe muoversi, ma la sua immagine di sfondo rimarrebbe fissa rispetto alla parte superiore della pagina. Man mano che veniva rivelata la tua immagine ripetuta, più della tua immagine di fondo sarebbe stata nascosta.

Questo sarebbe sotto l'intestazione di "sfalsare l'immagine di sfondo nel div inferiore di una certa quantità a seconda dell'altezza del contenuto-div", piuttosto che "l'altezza del div del contenuto per essere un multiplo di 300 px in tutto circostanze".

Answer 3

Si potrebbe provare ad aggiungere un event listener al div:

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

Answer 4

Se non ha bisogno di abbinare al top, posizionare l'immagine ripetendo in fondo del div (in modo che il troppo pieno si riverserà sopra le righe). Come questo:

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