Responsive background con css3

In questo breve  tutorial vi mostrerò come  avere un  responsive background(full page) , che si adatta alla risoluzione del monitor,utilizzando  le proprietà di css3 , senza la necessita di ricorrere a jquery o flash.

Grazie alla  proprietà  background-size più attributo cover, possiamo avere un immagine di sfondo sempre centrata che occupa  il 100% dello sfondo, conservando le proporzioni originali.

Codice css:

body{
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image:url(immagine.jpg);
}

DOWNLOAD DEMO

Supporto : Safari 3+, Chrome, IE9+, Opera 10+, Firefox 3.6+ , per Firefox ,dalla versione 4 il prefisso -moz non è più indispensabile.

Segnalibro e Share

Costantino Fusco

Sviluppatore di siti internet e di applicazioni web. Programmazione Web: PHP/MySQL HTML/CSS Ajax Javascript wordpress, Strategie SEO