jQuery: l'importanza del plugin Backstretch nel web design

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();
});