Backstretch è un semplicissimo plugin jQuery che vi permetterà  di aggiungere alle vostre pagine web un background a resize dinamico: l'immagine di sfondo scelta verrà  ridimensionata in base alle dimensioni della finestra del browser, il tutto in una singola riga di codice:

$.backstretch("http://tuosito.it/immagine.jpg");

Con l'avvento di monitor ad alta risoluzione la possibilità  di "riempire" tutto lo schermo con una singola immagine (di solito una fotografia) indipendentemente dalla dimensione della finestra è assolutamente irrinunciabile per tutti quei siti web che puntano sempre e comunque sull'alto impatto grafico, BackStretch risolve elegantemente e semplicemente questo problema.

12 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

Molto utile davvero questo Script, bisogna però tenere sempre conto della grandezza della foto... Sono per una soluzione più efficace secondo me: unire lo strech a un cambio dinamico delle immagini a diverse risoluzioni.

Softplace.it
Softplace.it

lo script mi piace molto!! per alcuni progetti secondo me é utile, anche se, in linea di principio non mi piace molto inserire una foto come background a tutto schermo...

Marco Pini
Marco Pini

Se ad esempio é una cornice, non é un problema se é distorta
senza nessuna polemica, andrea, solo per ragionare... ma non sono affatto d'accordo... una cornice uno spessore ce lo avrà  sempre... no? e se uno fa come me che metto due finestre una accanto all'altra? e quindi le stringo a metà  larghezza dello schermo... lo so sono casi particolari... diciamo comunque che lo script in oggetto ragiona per certe tipologie di sfondi e che per altri servono script che invece rendono l'immagine sempre al 100%...

EsseZeta
EsseZeta

@6 Eh già  l'immagine purtroppo é 500x375px Supersized l'ho usato ma mi é parso davvero pesantissimo

Napolux
Napolux

Che non sia un errore dipende dal tipo di immagine che uno mette di sfondo. Se ad esempio é una cornice, non é un problema se é distorta, ma lo é se scompare uno dei lati.

Andrea
Andrea

a me l’immagine cambia (compaiono o scompaiono dei tetti in basso)
non é mica un errore... dipende dai rapporti tra le due dimensioni del rettangolo... se la finestra solo la stringi in larghezza compaiono i tetti, se la rimpicciolisci in proporzione esatta invece no... deve essere così, dal momento che altrimenti l'immagine verrebbe strechata... per la sgranatura... quello é un altro paio di maiche... ma per il bg uno sceglie roba tipo nuvole proprio per ovviare a problemi del genere...

EsseZeta
EsseZeta

@Davide: E per far vedere un esempio di sfondo ridimensionabile a tutte le grandezze prendi un'immagine di bassa qualità ? :-/

Andrea
Andrea

ho usato supersized di cui parla Giovanni in un esperimento che ho fatto qualche mese fa... secondo me é migliore www.pierdomenico.org

Daniel
Daniel

Ho trovato anche questo articolo in si parla di un altro plugin jQuery che permette di impostare un'immagine come sfondo che si adatta automaticamente alle dimensioni della finestra sfondo a tutto schermo con jQuery. Altra caratteristica molto interessante, permette di realizzare una vero e proprio slideshow di immagini, con transazioni e preloading, come sfondo del layout web.

Giovanni
Giovanni

Bhe, che l'immagine sia sgranata immagino sia una naturale conseguenza della sua bassa qualità , non dello script in se. Idem per i dettagli (i tetti) in basso. Perché la foto non venga deformata, da qualche parte i dettagli devono scomparire a seconda di come ridimensioni la finestra del browser. A me sembra una valida alternativa

Davide
Davide