Full Background Image Ridimensionabile

delizard

Full Background Image Ridimensionabile

Ciao,
sto cercando di realizzare un background fullscreen che si ridimensioni automaticamente sulle dimensioni della finestra.
Ho trovato diversi tutorial, alcuni solo con CSS altri con JQuery ma nessuno sembra funzionare come proclamato nel tutorial..!!
Qualcuno di voi ha esperienza in proposito? Ha mai utilizzato questa cosa? Potrebbe indicare un risorsa testata che funzioni davvero correttamente?
Grazie a tutti,
ciao!

vnotarfrancesco

Penso di aver capito ma non trovo gli esempi che avevo usato tempo fa quindi provo solo a descriverti l'idea. Visto che con la proprietà background non si può fare quello che ti serve, uno dei trucchi è inserire l'immagine in un div e poi associare all'immagine uno stile che la porti un livello sotto al testo della pagina usando la proprietà z-index.
Se dovessi ritrovare l'esempio te lo scrivo, ma magari adesso hai uno spunto e trovi prima tu la soluzione.

Valerio Notarfrancesco

lorenzonow

Z-index?

Ma non basta inserire un'immagine e settargli width e height 100% ?


<div>
<img src="nomefile.ext" style="width:100%;height:100%;"/>
</div>

vnotarfrancesco

z-index è la proprietà che ti permette di stabilire su quale livello posizionare l'oggetto, un po' come se la pagina avesse tanti fogli di veline. Se non viene indicato z-index tutto è sullo stesso livello quindi l'immagine non sarebbe più un background ma coprirebbe tutta la pagina.

Valerio Notarfrancesco

lorenzonow

Ah si si certo. Stavo pensando che lo z-index non ti fa adattare l'immagine alla grandezza della finestra del browser, pensavo che intendessi quello e infatti mi sono stupito. Scusa.;)

chiarastorti

Combina quanto detto e ottieni:

stile con #background {position:absolute; z-index:1; width:100%; height:100%;}
div principale con <img id="background" src="immaginedisfondo.jpg" />

Così funziona... potrebbe andare bene al tuo caso?

gleenk

X qualcosa di più complesso ti consiglio bgstretcher2, uno script jQuery molto carino che potrebbe fare al caso tuo:
link: cyberward.net/blog/code/bgstretcher2/