Il plugin jQuery Backstretch ha una funzione fondamentale nel web design moderno: serve ad ottenere immagini di sfondo perfettamente ridimensionate ed adattate all'area di visualizzazione del browser.
Backstretch supporta anche i dispositivi mobile. Non solo: l'immagine viene sempre ridimensionata anche quando si cambia l'orientamento del dispositivo o la dimensione della finestra del browser.
Questo plugin può essere usato sia per l'intera pagina:
$(function() {
$.backstretch('sfondo.jpg');
});
che per elementi specifici:
$(function() {
$('#header').backstretch('sfondo.jpg');
});
Il parametro da passare al plugin è l'URL (assoluto o relativo) dell'immagine. In un contesto dinamico possiamo ottenere questo parametro anche da immagini già presenti nel documento:
$(function() {
var img = $('img', '#header'),
url = img.attr('src');
$('#header').backstretch(url);
img.remove();
});