Background image fullscreen

Oggi voglio spiegarti come ottenere un background full-screen. Il nostro obiettivo come al solito è quello di cercare di rendere il tutto cross-browsing, ottimizzando il codice il più possibile.
Background image fullscreen

Ogni proprietà CSS3 nasconde delle insidie

Background-size, una delle tante novità interessanti introdotte con i CSS3. E’ qui, è pronta per essere usata, la aspettavamo da tempo. Purtroppo internet Explorer è li pronto a rovinarci la festa e se pensi che possa bastare mettere un background-image al body, ti sbagli, dietro c’è qualcosa in più. A prescindere dalla risoluzione, l’immagine dovrà coprire interamente la pagina web, senza che ne vengano alterate le proporzioni al resize del browser.

Un pò di teoria

A questo link sono riportate le specifiche inerenti a questa proprietà. La proprietà in oggetto può avere differenti valori, tra cui:

  • una coppia di valori numerici interi o in percentuale – esempio
  • “Cover” – esempio
  • “Contain” – esempio

Differenza tra Cover e Contain

Cover, scala l’immagine di sfondo in modo che l’area sia completamente coperta dalla stessa. Alcune parti dell’immagine di sfondo potrebbero non essere visibili all’interno dell’area. Questo meccanismo consente all’immagine di non essere stretchata. Contain invece, ridimensiona l’immagine alla massima dimensione in modo tale che sia la sua larghezza che la sua altezza possono andare bene all’interno dell’area di contenuto senza che nessuna parte venga nascosta con la conseguenza che nella maggior parte dei casi l’immagine viene stretchata; questo secondo tipo di valore può essere adatto per quelle tipologie di immagini che subiscono bene alterazioni di proporzione. Senza ombra di dubbio però a noi interessa che l’area di sfondo venga coperta totalmente senza che l’immagine subisca alterazioni e quindi cover è il valore che fa per noi.

Dalla teoria alla pratica

Adesso che abbiamo capito come funziona, ecco il codice che ti serve:

body{
    background:url("bg.jpg") no-repeat fixed;
    background-size:cover;
}

La compatibilità non ci aiuta

Nulla di più facile!!! Si come no… meglio che dai un occhio a caniuse prima di cantar vittoria. Come al solito, IE ci rovina la festa. Ho però qualche asso nella manica che può venirci in aiuto per colmare le deficienze di questo simpatico browser.


Come mi comporto con i CSS3

Ogni volta che mi trovo nella situazione di dover implementare una proprietà CSS3, faccio sempre lo stesso ragionamento. Questa proprietà se non applicata anche a IE potrebbe causare limitazioni nella navigabilità o rompere completamente il layout?

No non causa problemi

Applico la proprietà CSS3 non curandomi dei browser obsoleti. Un esempio potrebbe essere quello del border-radius o del box-shadow. Che non ci sia il bordo rotondo o l’ombretta figa, a me sinceramente poco importa. Gli utenti che utilizzano IE sono abituati a navigare un web “piatto” senza troppi fronzoli che fanno da contorno. La cosa giusta è garantire una coerenza del design: tutto sarà piatto, tutto sarà spigoloso, tutto risulterà coerente.

Si causa problemi

Il discorso cambia radicalmente quando un proprietà CSS3 non supportata da IE causa problematiche serie nella navigabilità o nel layout. Un esempio concreto potrebbe essere quello dell’RGBA. Se imposto un background di un div in RGBA e su Internet Explorer quello stesso background non comparirà rendendo illeggibili tutti i testi, allora in quel caso, adotto il cosiddetto “workaround” per trovare una soluzione sostenibile anche per per i browser obsoleti.

Internet Explorer

In questo particolare caso, secondo me è giusto che anche gli utenti di IE possano godere di un background fullscreen. Come avrai potuto capire IE8 e versioni precedenti non supportano il background-size.

Soluzione jQuery di CSS-Tricks

Ho trovato un articolo di css trick sul background size che forse fa al caso nostro. Vado direttamente al punto. L’autore dell’articolo ci informa che è possibile rendere compatibile la suddetta proprietà con un piccolo script in jQuery:

This whole idea becomes a lot easier (from a CSS perspective) if we know if the aspect ratio of the image (inline we intend to use as a background) is larger or smaller than the current aspect ratio of the browser window. If it is lower, than we can set only the width to 100% on the image and know it will fill both height and width. If it is higher, we can set only the height to 100% and know that it will fill both the height and width.

$(function() {   
    var theWindow    = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();
										
    function resizeBg() {		
        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg.removeClass().addClass('bgheight');
        } else {
            $bg.removeClass().addClass('bgwidth');
        }					
    }
													
    theWindow.resize(function() {
        resizeBg();
    }).trigger("resize");

});
<img src="img.jpg" id="bg" alt="">
#bg{position:fixed;top:0;left:0;}
.bgwidth{width:100%;}
.bgheight{height:100%;}

Sostanzialmente mette a confronto la larghezza della finestra del browser con quella dell’immagine che viene inserita non come background ma tramite tag img. In relazione al fatto che sia minore o maggiore, setta una classe piuttosto che un’altra che gestiscono la width o la height dell’immagine a 100%. Conviene secondo me utilizzare un’immagine bella grossa altrimenti per risoluzioni molto grandi si rischia un taglio. Essendo del codice che riguarda interamente Internet Explorer, lo isolerei in un commento condizionale, cosi che solo quelle particolari versioni lo prendano in considerazione, mentre i browser moderni ignoreranno tutto e utilizzeranno solo il background-size CSS3.

Plugin jQuery Backstretch

Questo plugin è molto facile da usare. Il codice è minimo. Basta includere ovviamente la libreria di jquery e il plugin stesso e infine inizializzare lo script. Potrai scegliere se applicare all’elemento body l’immagine fullscreen o in alternativa se preferisci, applicarla ad un qualsiasi elemento blocco all’interno della pagina. In entrambi casi lo script andrà a inniettare nel DOM prima della chiusura dell’elemento un div con classe backstretch al cui interno posizionerà in maniera dinamica l’immagine da scalare. Questo è il sito di riferimento del plugin. Da cui scaricare l’intero pacchetto comprensivo di esempi.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    $.backstretch("image.jpg"); /* Applicato al body*/
    $(".other").backstretch("image.jpg"); /* Applicato ad un elemento blocco */
</script>

Anche in questo caso potete “impacchettare” tutto il jquery in un commento condizionale solo per Internet explorer cosi da lasciare pulito il codice per i browser moderni.

Conclusioni finali

Per questo articolo non ho inserito alcuna demo o download perchè voglio linkarvi direttamente quella di CSS-triks. Da li potete prendere direttamente il codice che vi serve per far funzionare tutto. Come già dicevo in precedenza io personalmente inserirei tutto in commenti condizionali così da non intaccare i browser moderni. Sostanzialmente basta settare per tutti il background-size e dire a IE di caricare il jquery, il css e il tag IMG. lo stesso discorso vale anche per il Plugin backstretch. Essendo un workaround a tutti gli effetti è giusto che venga interpretato solo dai browser che non riescono ad interpretare la proprietà CSS3 in oggetto. Per qualsiasi problema come al solito ci sono i commenti qui di seguito e fanpage di FaceBook.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github