inserire due immagini di sfondo

**moonba** · 16-02-2009, 11:34

ciao a tutti,ho applicato un gradiente al body che imposta lo sfondo ad un layout .
ora vorrei applicare una seconda immagine in modo che stia dietro al container principale.

l'immagine è quella riportata sopra,dove il colore nero è il colore di sfondo principale,mentre il blocco azzurro il container e il blocco rosso,è il box che dovrebbe contenere l'immagine,che sta dietro al container.
in che modo posso realizzare una cosa del genere?

**Mich_** · 16-02-2009, 11:51

Non so se questo risolve il tuo problema: prendilo come un'idea.
In caso contrario posta il link.

codice:

<body>
  <div id="tutto">
    qui tutto il contenuto
  </div>
</body>

CSS:
body {
  background: url(quelloCheHaiMostratoNero.jpg) no-repeat top center;  /* ordine: Y X */
}
#tutto {
    background: url(quelloCheHaiMostratoRosso.jpg) no-repeat 50% 50px;  /* ordine: X Y */
}
...

**moonba** · 16-02-2009, 12:07

nell'immagine che ho riportato sopra non è riprodotto comunque l'ho detto che al body ho applicato l'immagine di 1px per 1000px di un gradiente che viene ripetuto in orizzontale,il container principale invece,oltre ad avere un colore di sfondo ha al suo interno altri div per i contenuti,colonna di sx colonna centrale e colonna di dx che hanno come colore di background il bianco,in ogni caso inserita nel modo che mi hai proposto l'immagine non esce comunque dal container e viene praticamente ricoperta dagli altri blocchi..

**Mich_** · 16-02-2009, 12:59

Originariamente inviato da moonba
nell'immagine che ho riportato sopra non è riprodotto comunque l'ho detto che al body ho applicato l'immagine di 1px per 1000px di un gradiente che viene ripetuto in orizzontale,

Si`, scusa. Allora la ripetizione va messa diversamente.

il container principale invece,oltre ad avere un colore di sfondo ha al suo interno altri div per i contenuti,colonna di sx colonna centrale e colonna di dx che hanno come colore di background il bianco,

Intendi quello illustrato in blu? Su quello non sono intervenuto; rimane cosi come lo hai pensato

in ogni caso inserita nel modo che mi hai proposto l'immagine non esce comunque dal container e viene praticamente ricoperta dagli altri blocchi..

Un'immagine di sfondo va a finire sempre in secondo piano rispetto al contenuto; e anche rispetto ai contenitori interni che hanno un proprio sfondo. Se vuoi che si veda l'immagine devi non definire lo sfondo (o definirlo trasparente).
Se ricordo bene, solo il body ha di default uno sfondo bianco (opaco), mentre tutti i contenitori interni hanno di default sfondi trasparenti. Ma per evitare problemi cross-browser puoi definirli trasparenti.

Quasi tutti i browser moderni distinguono tra <html> e <body>, mentre in IE (quirks mode) i due oggetti sono coincidenti: ecco perche` non ho sfruttato i due oggetti per dare sfondi diversi. Ma se sei sicuro che la pagina non sara` vista in IE, puoi usare html e body per definire i due sfondi.

Discussione: inserire due immagini di sfondo

Strumenti discussione

Ricerca discussione

Visualizza

inserire due immagini di sfondo

Permessi di invio