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

golber

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

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

cali1981

Se invece di top metti bottom cambia qualcosa?

golber

il punto è che se metto bottom, mi taglia in alto e in alto ho un header, e anche quello ha il pattern che si deve appoggiare al corpo del sito.

cali1981

allora la cosa è complicata, non puoi fissare un'altezza per le pagine? Forse puoi usare js ma sicuramente non è il massimo

golber

No, non posso, volevo mettere all'interno un blog, quindi a seconda dei post lo spazio è diverso...

Avevo pensato al JS, e l'algoritmo potrebbe essere questo:

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

Ma come si fa in javascript?

Qualcuno sa aiutarmi?

grazie, ciao

cali1981

si infatti pensavo a qualcosa del genere. Per fare quello che devi fare tu, un codice di massima è:

var div = document.getElementById(id);
height = document.getElementById(id);
div.height = ceil (height / altezzaSfondo) * altezzaSfondo;

non ho idea di quanto funzioni, ma come inizio non mi sebra male!

Ciao

golber

Grande, grazie!

ma credo ci sia un errore nel codice: queste due righe fanno la stessa cosa, mentre penso tu con la seconda intendessi prelevare il valore della dimensione del div

var div = document.getElementById('corpo');

var height = document.getElementById('corpo');

... quindi?

cali1981

si la seconda sarà qualcosa del tipo var height = div.height;

golber

Grazie 1000!

ho risolto!

Questo il codice ad uso della comunità!

ciaoo e grazie!

<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>

cali1981

Bene!

Prego

maxxxweb

@cali1981 said:

Bene!

Prego

Ciao, ho trovato molto interessante l'argomento visto che mi sono trovato a risolvere lo stesso problema. Ho provato con il codice javascript postato ma non va. Esattamente il codice dove deve essere inserito? Sicuramento sto sbagliando qualcosa.
Utilizzo joomla ed ho provato ad inserire il codice all'interno dell'index prima di:

Grazie in anticipo per chi vorrà aiutarmi

Max

golber

ciao,
io codice va messo alla fine, io l'ho messo addirittura dopo il tag </html>

Ti ricordo che 'corpo' è l'id del div che contiene tutto lo sfondo di cui vuoi calcolare la dimensione, che poi va impostata per eccesso ad un multiplo dell'altezza della tua immagine di sfondo ripetuta.

Ciao