{"id":85,"date":"2010-07-19T22:36:06","date_gmt":"2010-07-19T20:36:06","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/ingrandite-quel-background\/"},"modified":"2010-07-19T22:36:06","modified_gmt":"2010-07-19T20:36:06","slug":"ingrandite-quel-background","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/ingrandite-quel-background\/","title":{"rendered":"Per favore, ingrandite quel background!"},"content":{"rendered":"

Con il mondo della pubblicit\u00e0 cos\u00ec smanioso di utilizzare ogni centimetro di qualsiasi medium per il brand o per la product experience, sta diventando sempre pi\u00f9 popolare la scelta di creare siti web con background che occupano tutta la finestra del browser. Usando i CSS, si pu\u00f2 ottenere questo risultato piuttosto facilmente. Basta semplicemente inserire un’immagine di background gigante in una pagina con una riga di codice (Gli a-capo sono marcati da \u00bb \u2014Ed.<\/em>):<\/p>\n

  
    body {
  \tbackground: #000 url(myBackground_1280x960.jpg) \u00bb  
\tcenter center fixed no-repeat;
    }
  <\/code>
<\/pre>\n
L’esempio uno<\/a> mostra un’immagine di background centrata di 1280×960 pixel che \u00e8 “fissata” all’area di visualizzazione (non scorre con il documento).<\/p>\n
Ma quale sar\u00e0 la dimensione “grande abbastanza” per l’immagine? I monitor ed i sistemi operativi si sono evoluti rapidamente e come risultato c’\u00e8 un grande range di risoluzioni di schermo disponibili. Le risoluzioni oggi pi\u00f9 diffuse sono 1024x768px, 1280x800px, 1280x1024px e 1440x900px. Tuttavia, con l’avvento degli schermi HD (1920x1080px) ed i display professionali che supportano risoluzioni fino a 2560x1600px, quasi tutto \u00e8 possibile.<\/p>\n
Inoltre, c’\u00e8 anche il caso delle risoluzioni pi\u00f9 basse da considerare: molte persone ridimensionano la finestra del browser perch\u00e9 stia in una certa percentuale del loro schermo, mentre un range di schermi moderni supporta solo la risoluzione 800x600px. E questo lascia molti device mobili con risoluzioni inferiori fuori dall’equazione.<\/p>\n
Invece di usare una misura fissa per il background, una soluzione migliore consisterebbe nello scalare l’immagine affinch\u00e9 stia nelle diverse dimensioni della finestra. Sfortunatamente, CSS 2.1 non ha mezzi per scalare le immagini di background.<\/p>\n
Ci sono un paio<\/a> di workaround<\/a>, che tuttavia dipendono dall’elemento img<\/code> di HTML (invece che dai background CSS). Per di pi\u00f9, usano il posizionamento assoluto per la disposizione a layer e le tabelle, o degli script per abilitare il ridimensionamento. In aggiunta, non tutte queste tecniche mantengono il rapporto altezza-larghezza dell’immagine, il che risulta in background allungati in maniera non realistica.<\/p>\n
\n
I background CSS3 ci vengono in soccorso<\/h2>\n
Il W3C CSS Background and Borders Module Level 3<\/a> (attualmente una working draft) definisce la propriet\u00e0 background-size<\/code> che calza a pennello sulle nostre richieste. I valori interessanti (per citare la specifica W3C<\/a>) sono:<\/p>\n
\n
contain<\/code><\/dt>\n
Scala l’immagine, preservandone l’intrinseco rapporto larghezza-altezza (se c’\u00e8), alla dimensione pi\u00f9 grande, cos\u00ec che sia la sua larghezza sia la sua altezza vadano bene all’interno dell’area di posizionamento del background.<\/dd>\n
cover<\/code><\/dt>\n
Scala l’immagine, preservandone l’intrinseco rapporto larghezza-altezza (se c’\u00e8), alla dimensione pi\u00f9 piccola cos\u00ec che sia la sua larghezza sia la sua altezza possano coprire completamente l’area di posizionamento del background.<\/dd>\n<\/dl>\n
Contain<\/code> fa sempre stare l’intera immagine all’interno della vostra viewport, lasciando dei bordi opachi sia su top-bottom<\/code> sia su left-right<\/code> ogni volta che il rapporto dell’immagine di background e la finestra del browser non \u00e8 uguale. Nell’esempio due<\/a> abbiamo esteso il codice dell’esempio uno<\/a> impostando la propriet\u00e0 background-size<\/code> a contain<\/code>.<\/p>\n
Cover<\/code> riempie sempre la finestra del browser, tagliando un po’ di dettagli nel processo, che \u00e8 quel che personalmente preferisco per la maggior parte dei casi. Potete controllare come la vostra immagine viene allineata all’interno della viewport usando la propriet\u00e0 background-position<\/code>. Nell’esempio tre<\/a> abbiamo di nuovo esteso l’esempio uno<\/a>, questa volta impostando la propriet\u00e0 background-size<\/code> a cover<\/code>.<\/p>\n
Si abilita il ridimensionamento del background aggiungendo le seguenti dichiarazioni allo stylesheet:<\/p>\n
     
\tbody {
  \t   background: #000 url(myBackground_1280x960.jpg) \u00bb 
\t   center center fixed no-repeat;
  \t   -moz-background-size: cover;
  \t   background-size: cover;
\t}
     <\/code>
  <\/pre>\n
La propriet\u00e0 background-size<\/code> \u00e8 gi\u00e0 supportata in Firefox 3.6 (usando il prefisso -moz<\/code>; Firefox 4 utilizzer\u00e0 la propriet\u00e0 CSS3 regolare), Chrome 5, Safari 5 e Opera 10.54; verr\u00e0 inoltre inclusa in Internet Explorer 9 (\u00e8 gi\u00e0 disponibile nella Preview 3). Le versioni pi\u00f9 vecchie di WebKit e Opera supportano gi\u00e0 la propriet\u00e0 background-size<\/code>, sebbene queste implementazioni siano basate su draft precedenti che non includevano le keyword contain<\/code> e cover<\/code>.<\/p>\n
Lo svantaggio di questo metodo \u00e8 che non c’\u00e8 alcuna propriet\u00e0 per il background disponibile per impostare una larghezza o un’altezza minima. Quando si ridimensiona la finestra del browser ad una dimensione molto piccola di altezza o larghezza, l’immagine di background si scaler\u00e0 fino a raggiungere una dimensione molto piccola: comportamento spesso indesiderato.<\/p>\n<\/div>\n
\n
Aggiungere le media query di CSS3 all’impasto<\/h2>\n
Il W3C CSS3 Media Queries Module<\/a> (una candidate recommendation) definisce le regole condizionali che si applicano solo all’interno di determinati range di larghezza o altezza. Questo ci permette di implementare il ridimensionamento del background da una larghezza e altezza minima e cos\u00ec via. Le media query sono supportata da Firefox 3.5, Chrome, Safari 3 e Opera 7, e saranno anche incluse in Internet Explorer 9.<\/p>\n
Aggiungendo le seguenti regole di stile diremo al browser che non vogliamo che l’immagine di background si scali ad una dimensione inferiore ai 1024×768 pixel:<\/p>\n
  
   body {
     background: #000 url(myBackground_1280x960.jpg) \u00bb
     center center fixed no-repeat;
     -moz-background-size: cover;
     background-size: cover;
   }

   @media only all and (max-width: 1024px) and (max-height: 768px) {
   body {\t
     -moz-background-size: 1024px 768px;
     background-size: 1024px 768px;
   }
  }
<\/code>
<\/pre>\n
Notate che 1024x768px ha lo stesso rapporto dell’immagine di background (1280x960px). Quando usate rapporti diversi otterrete salti improvvisi nello scaling quando ridimensionerete la finestra del browser.<\/p>\n
Nei nostri ultimi esempi, quattro<\/a> e cinque<\/a>, abbiamo aggiunto la regola @media<\/code>, cos\u00ec che l’immagine di background non si scali a meno di 1024×768 pixel. L’esempio cinque<\/a> mostra che impostando la propriet\u00e0 background-position<\/code> a left-bottom<\/code> invece che center-center<\/code>, possiamo controllare il modo in cui l’immagine di background \u00e8 allineata all’interno della viewport.<\/p>\n<\/div>\n
\n
Rivisitazione delle vecchie tecniche<\/h2>\n
Stiamo vivendo in un periodo particolarmente vivace per i web developer, con tutti i produttori di browser che lavorano alla clemente per implementare le nuove tecnologie HTML5 e CSS3. Come risultato, \u00e8 ora di rivedere le vecchie tecniche per capire come si possano ottenere gli stessi risultati in maniera pi\u00f9 intelligente e pulita. Mentre i cicli di upgrade di Firefox, Chrome, Safari e Opera sono relativamente brevi<\/a>, sar\u00e0 interessante vedere quanto tempo ci metteranno le persone ad adottare Internet Explorer 9, cos\u00ec che possiamo cominciare ad usare molte di queste tecniche su larga scala al pi\u00f9 presto.<\/p>\n
Illustrazioni dell’articolo: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Le immagini di background che riempiono lo schermo elettrizzano gli uomini del marketing ma sprecano band nei device con piccole viewport e sono soggette a problemi di rifilatura ed allineamento nei monitor ad alta risoluzione e widescreen. Invece di usare una singola dimensione prefissata per il background, una suoluzione migliore sarebbe quella di scalare l’immagine per fare s\u00ec che vada bene nelle differenti dimensioni della finestra. E con i background CSS e le media query CSS3 possiamo proprio fare questo. Bobby van der Sluis ci mostra come.<\/p>\n","protected":false},"author":818,"featured_media":7000584,"comment_status":"open","ping_status":"open","template":"","categories":[242,244,23],"tags":[],"coauthors":[303],"class_list":["post-85","article","type-article","status-publish","has-post-thumbnail","hentry","category-browser","category-css","category-numero-10-20-luglio-2010"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/85","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=85"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000584"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=85"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=85"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=85"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}