Sfondo nel body

**cubalibre** · 13-02-2009, 09:55

Ciao,
vorrei inserire una immagine di sfondo nel body che con qualunque risoluzione prenda sempre tutto il video al 100%. L'immagine è astratta e molto leggera, anche se vi sono deformazioni non importa.
E' possibile?

Nico

**ricman** · 13-02-2009, 10:07

Un utente del forum sa' come si fa (ma ci vuole il js)... e gliel'ho già chiesto un paio di volte... Appena mi dice qlcosa ti faccio sapere.

**Mich_** · 13-02-2009, 11:25

Originariamente inviato da cubalibre
Ciao,
vorrei inserire una immagine di sfondo nel body che con qualunque risoluzione prenda sempre tutto il video al 100%. L'immagine è astratta e molto leggera, anche se vi sono deformazioni non importa.
E' possibile?

No, con i CSS da soli non e` possibile.
I CSS non hanno la possibilita` di modificare le immagini.

Ci sono due tipi di soluzioni che sono passate da queste parti (cioe` io ne ricordo due):
1. caricare immagini diverse a seconda della dimensione della finestra
2. mediante sovrapposizione di due layer, di cui quello sotto contiene solo un'immagine con tag <img> (che viene poi stirata al 100%), mentre il layer superiore contiene tutto il contenuto del sito.

Il punto 1 puo` essere realizzato lato server o lato client, ciascuno con i suoi pro e i suoi contro.
1.a - ricaricamento della pagina tramite sistemi lato server
1.b - ricaricamento dell'immagine mediante JS (lato client) - sfarfalla un po` all'inizio
1.c - ridefinizione di alcuni attributi CSS mediante JS (lato client) e conseguente ricaricamento dell'immagine - anche questo sfarfalla un po` all'inizio

**cubalibre** · 13-02-2009, 19:37

ho capito poco.....quello sotto contiene solo un'immagine con tag <img> (che viene poi stirata al 100%).......

come si fa intanto a fare questa cosa? a stirare l'immagine alla totale dimensione del div?

**ricman** · 14-02-2009, 01:56

Leggi anche questa discussione... c'è un link a CssPlay
http://forum.html.it/forum/showthrea...readid=1309215

**Mich_** · 16-02-2009, 10:38

Originariamente inviato da cubalibre
ho capito poco.....quello sotto contiene solo un'immagine con tag <img> (che viene poi stirata al 100%).......

come si fa intanto a fare questa cosa? a stirare l'immagine alla totale dimensione del div?

Esempio:

codice:

<body>
  <div id="sfondo">[img]...[/img]</div>
  <div id="contenuto">
    ... qui il contenuto vero della pagina (senza sfondi) ...
  </div>
</body>

CSS:
body {
  width: 100%;
  height: 100%;
}
sfondo {
  width: 100%;
  height: 100%;
  position: absolute;
  top:0; left:0;
  z-index: 1;
}
sfondo img {
  width: 100%;
  height: 100%;
}
contenuto {
  width: 100%;
  height: 100%;
  position: absolute;
  top:0; left:0;
  z-index: 10;
  overflow: auto;
}

Quesata soluzione funziona in tutti i browser, ma ha alcuni difetti che la rendono poco raccomandabile:
- in caso di stampa, viene stampato lo sfondo, con possibile disordine apparente
- in caso di CSS inseriti dal browser, lo sfondo viene comunque visualizzato (quindi e` una soluzione non-accessibile)
- l'utente nonpuo` togliere lo sfondo, senza togliere anche tutte le altre immagini della pagina

Discussione: Sfondo nel body

Strumenti discussione

Ricerca discussione

Visualizza

Sfondo nel body

Re: Sfondo nel body

Permessi di invio