repeat-y di un'immagine di background: come evitare di tagliarla

[golber]

Ciao a tutti,

sto applicando un'immagine di sfondo ad un div. Essendo il contenuto della pagina dinamico, ho inserito l'attributo repeat-y. Ma dato che l'immagine ha un pattern di un certo tipo che poi deve agganciarsi perfettamente a quello dell'immagine del footer, devo evitare che lo sfondo del div venga tagliato al termine del contenuto del div, evitando un brutto effetto grafico. Quindi deve esserci una ripetizione dello sfondo per intero.

Non so se mi sono spiegato bene...

#corpo{ 
 width:805px;
 padding: 40px 150px; 
 background: url(images/background.jpg) repeat-y top; 
}

Grazie a tutti,ciao

[Mich_]

Prova con:

background: url(images/background.jpg) repeat-y bottom left;

Dovrebbe allinearsi in basso (ed eventualmente tagliare in alto).

L'alternativa, che io sappia, e` un JS che definisca l'altezza del blocco multipla dell'altezza dell'immagine di sfondo, ma e` una cosa che da un lato non e` semplice da implementare, e dall'altro dall'esito non sicuro.

[golber]

Grazie per la pronta risposta...

come immaginerai il pattern è anche nell'header, quindi si creerebbe lo stesso problema con il bottom...

Ma possibile che non esiste un tag del tipo entire ??? o qualcosa del genere?

eventualmente in JS sapresti darmi qualche riferimento? prima di postare questo messaggio ho fatto una ricerca su google senza risultati.

Grazie

[Mich_]

Ma possibile che non esiste un tag del tipo entire ??? o qualcosa del genere?

Semmai sarebbe un attributo CSS, o un valore da assegnare a qualche attributo tipo height.
Comunque non c'e`. Non nella versione attuale dei CSS (la 2.1). Per i CSS3 (non ancora ufficiali) non ne ho notizia, ma le spcifiche dei CSS3 sono pubbliche, per cui se ti interessa le trovi facimente sul sito del W3C o siti collegati.

Per il JS, puoi provare con una ricerca (bottone in alto) nel forum JS (dove sposto anche questa discussione).

[golber]

Nella ricerca non ho trovato niente.

Da quello che sembra l'algoritmo potrebbe essere questo:

1. Calcolo la dimensione (heigth) del div
2. Arrotondo la dimensione per eccesso al valore multiplo dell'altezza dell'immagine di background
3. riassegno questo nuovo valore alla dimensione del div.

Qualcuno sa come farlo in javascript?

Grazie

[golber]

Ho risolto, ecco la soluzione.

Grazie, ciaoo

<script type="text/javascript"> var altezza = document.getElementById('corpo').offsetHeight; var altezzaSfondo = 109; var newAltezza = Math.ceil (altezza / altezzaSfondo) * altezzaSfondo; document.getElementById('corpo').style.height= newAltezza + 'px'; </script>