immagini di sfondo in div sovrapposti

**hdtinit** · 01-03-2011, 20:48

Salve a tutti,
espongo il mio problema.
Io ho messo una immagine di sfondo sul body in un foglio css esterno. Fin qui tutto bene. il browser lo visualizza correttamente.
A questo punto la mia esigenza è di sovrapporre una nuova immagine di sfondo a quella presente sul body. Ho quindi sovrapposto un div wrap con una immagine di sfondo. Questa però sul browser non si vede.
Cerco di postare un po' di codice in modo da essere più chiaro. Il codice è ridotto all'essenziale per chiarezza.

HTML

<body>
<div id="wrap">
</div>
<body>

CSS

body {background: url(img/sfondo2.jpg); }
#wrap {background: url(img/sfondo3.jpg); }

Sapreste dirmi per quale motivo si vede solo l'immagine dello sfondo del body mentre quella del div wrap no?

Grazie per l'aiuto.

**Svarions** · 01-03-2011, 21:00

prova a dare delle misure al div che se no è alto 0 lungo 100%

**damy11** · 01-03-2011, 21:03

Come detto da svarions dai a #wrap:
"width" e "height" uguali all'immagine e metti anche z-index: 1;

**hdtinit** · 01-03-2011, 21:10

Allora, ho sintetizzato per praticità, mi interessava rendere l'idea di ciò che volevo fare per sapere se fosse possibile. Comunque sarò più chiaro.

CSS

body {
width: 1000px;
margin: 0px;
padding: 0px;
background: url(img/fondo2.jpg);
background-position: center top;
background-repeat: repeat-y;
}

#wrap {
background: url(img/fondo3.jpg);
background-position: center top;
width: 100%;
padding: 0px;
}

Le immagini sono:
fondo2.jpg - 1000px x 10px
fondo3.jpg - 1000px x 300px

**Svarions** · 01-03-2011, 21:22

Forse non sono stato chiaro o forse non ho capito il problema dal codice che hai postato

codice:

body {
width: 1000px;
margin: 0px;
padding: 0px;
background: url(img/fondo2.jpg); 
background-position: center top;
background-repeat: repeat-y;
}

#wrap {
background: url(img/fondo3.jpg); 
background-position: center top;
width: 100%;
padding: 0px;
}

manca l'altezza del #wrap qualcosa tipo height:300px; da aggiungere al #wrap. al body non serve perchè è per definizione alto 100%

**hdtinit** · 02-03-2011, 00:07

.

**hdtinit** · 02-03-2011, 00:09

Ho provato ad allegare una immagine per essere più chiaro.
Spero sia riuscito ad allegarla.

Il rettangolo grigio è il body, composto da una immagine fondo2.jpg che si ripete in verticale per tutta l'altezza della pagina.
Il rettangolo arancione è il div #wrap che si estende per tutta la lunghezza e altezza del body e che contiene come sfondo l'immagine fondo3.jpg dalle dimensioni di 1000px x 300px che è illustrata dal rettangolo semitrasparente.
i rettangoli gialli sono altri div contenuti in #wrap.

Non posso dare a #wrap la dimensione dell'immagine di sfondo che contiene perchè deve per forza essere più grande dovendo contenere i div gialli.

Avrei fatto direttamente una immagine di sfondo grande che includesse entrambe le immagini ma sarebbe venuta 1000px x 3000px e su iphone e ipad non sarebbe stata visualizzabile nella scala corretta per cui ho dovuto ricorrere per forza a questa soluzione.

Spero di essere riuscito a rendere l'idea del mio problema.

**Vincent.Zeno** · 02-03-2011, 00:26

Originariamente inviato da hdtinit
Spero sia riuscito ad allegarla.

avevi aperto una nuova discussione
ci ho pensato io a sistemare

Discussione: immagini di sfondo in div sovrapposti

Strumenti discussione

Ricerca discussione

Visualizza

immagini di sfondo in div sovrapposti

Permessi di invio