disign.it | CSS3 immagine di sfondo a tutto schermo | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 5.928 visualizzazioni

CSS3 immagine di sfondo a tutto schermo

13/07/2011

Una delle novità introdotte da CSS3 ci permette di inserire un'immagine di sfondo che vada a coprire la finestra del nostro browser al 100%!

E' scontato che dovremo partire da un'immagine in proporzione 4/3 e magari in dimensione 955 * 600 pixel, o se l'immagine si presta a esser ingrandita senza perdita di resa almeno 7660 * 420 pixel.

Il codice CSS è questo:

html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(images/immagine_di_sfondo.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

L'applicazione è sull'elemento html, la regola che porta al 100% è background-size: cover;, con le diverse specifiche per i diversi browser in modo da andare a coprire il target più alto possibile.

← Htaccess, configurazione di Apache I metodi di fusione →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.