Background superiore ed inferiore

[AltF4]

Ciao a tutti, sto cercando di risolvere un problema che ho da un pò di tempo, avevo intenzione di realizzare un layout che avesse uno sfondo superiore ed uno superiore.

Mi spiego meglio, immaginavo una fascia superiore, diciamo di 200px, di colore rosso ed un'altra uguale in basso.

Entrambe si estenderebbero per tutta la larghezza del monitor, mentre il sito sarebbe centrato e si accavallerebbe ad entrambe le fasce.

Pensavo di fare una jpg di sfondo, il problema è che se la pagina diventa più lunga, la fascia inferiore o diventa troppo grande e quindi sproporzionata rispetto a quella superiore oppure termina ed inizia un altro colore di sfondo.

Spero di essere riuscito a spiegare la mia difficoltà.

Grazie mille per l'aiuto!

[AltF4]

Ancora niente da fare, ho inserito un div superiore con il seguente stile:

.su {
			background-color: #CC0000;
			width: 100%; 
			height: 2000px;
		}

ed uno inferiore con il seguente stile:

.giu {
			background-color: #CC0000;
			width:100%; 
			position:absolute;  
			height: 200px;
			bottom: 0px;
			
		}

Il problema è che se inserisco una tabella nel primo div, quando questa si allunga, si allunga di conseguenza anche il div e se diventa molto lunga, il div inferiore non resta ancorato in basso, ma sale.

Ho provato anche ad inserire una tabella al di fuori dei 2 div ed in questo caso mantengono le loro dimensioni e posizioni, solo che la tabella risulta esterna sia al div superiore che a quello inferiore, mentre il mio obiettivo era che rimanessero al di sotto di tutto il sito, come sfondo. Una fascia di 200 pixel in alto ed una di 200 pixel in basso.

Qualche piccolo consiglio?



Grazie!

[Prill]

Potresti creare una immagine di sfondo, che sarà alta 200 pixel, allineata in alto e ripetuta in orizzontale come sfondo del body. La stessa immagine, o un'immagine diversa se lo sfondo è diverso, potrà essere impostata su un div contenitore, largo al 100%, come sfondo allineato in basso. Nel tuo div contenitore esterno poi potrai avere i tuoi contenuti centrati in un altro div

[AltF4]

Ciao, ti ringrazio innanzitutto per avermi risposto, per quanto riguarda la parte superiore posso risolvere come consigliato da te, l'ho fatto altre volte.

Ma per la parte inferiore continuo ad avere problemi, più o meno dovrei creare un effetto come questo:

[Simonetta72]

Come ti ha detto Prill, se inserisci nel contenitore l'immagine di sfondo alta 200 px allineata in basso, poi puoi sempre annidare un altro div centrato con le caratteristiche che vuoi (sfondo bianco, larghezza definita, margin bottom etc) così puoi ricreare l'effetto che cerchi.

[AltF4]

Cosa dire? Grazie ad entrambi!!!