Css & Image Fullscreen
Lavorando per un progetto di un nuovo Cliente ci siamo imbattuti nel dover ricreare un effetto di immagini in fullscreen senza però utilizzare linguaggio Flash, poichè la richiesta è che il sito debba poter essere visionato anche da piattaforme mobile o Tablet quali iPad e iPhone.
Bene allora armati di buon impegno abbiamo lavorato su un foglio di stile e il risultato è l’integrazione di un Background inserito nel template grafico a DIV utilizzando CSS.
L’altro problema era legato al fatto che lo stesso background doveva in qualche modo adattarsi sia al tipo di browser che al tipo di risoluzione o apertura della finestra. In sostanza utilizzando la classe CSS3 “background-size” Â abbiamo ricreato l’effetto.
Importante: Questo metodo è Cross-Browser e non richiede il supporto di Javascript… comodo no? 
Ecco il Codice CSS di Base
html, body {
background: url(marylin.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Philosopher', cursive;
}
Chi è artwork?
ArtWork è una web agency con sede a Milano Centro. Specializzata nello studio, progettazione, sviluppo e realizzazione siti internet ottimizzati per i motori di ricerca, web design, restyling e ristrutturazione di siti internet esistenti, grafica e blog per il web, studio e realizzazione di marchi e logo, servizi internet. Creazione siti internet e sviluppo pagine web per qualsiasi esigenza, dalla semplice pagina al sito completo. Non smettiamo mai di imparare e il nostro obiettivo é quello di dedicare a Voi la nostra esperienza nel settore.
Copyright: Il contenuto del sito www.artworkstudios.it è di proprietà di artwork con p.iva 07829880967 ed è vietata la riproduzione anche parziale. Tutti i Contenuti presenti sul sito sono protetti dalle leggi in materia di proprietà intellettuale e/o industriale. I Contenuti riportati nelle inserzioni pubblicitarie o le informazioni presentate all'utente dal servizio o dagli inserzionisti sono protette dalle norme in materia di diritti d'autore, marchi, brevetti o altri diritti di proprietà intellettuale e/o industriale.
l’immagine si deforma…
Ciao Pimpi,
abbiamo revisionato il tutorial ed inserito la nuova classe CSS3 background-size.
Questa, risolve il problema della proporzione immagine
(sempre senza l’ausilio di javascript ma solo CSS).
Quindi la soluzione sarà quella di utilizzare all’interno del tag html (preferibile body)
nel nostro foglio di stile, la classe sopra descritta.. quindi semplicemente:
html {
background: url(nome_immagine.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Spero di esserti stato utile, a presto
Vi ringrazio tantissimo per l’aiuto !!!
siete grandi
Ma su IE funziona?
Ciao Luca,
su IE9 assolutamente si