HTML, CSS e tutto il resto
I siti web con immagine di sfondo a tutto schermo sono di sicuro molto eleganti e di grande effetto, perchè allargano la percezione dello spazio dietro ai contenuti principali, e se le fotografie sono "d’autore", il layout può essere minimalista e lasciar parlare solamente le immagini.
Vediamo di seguito non solo come impostare una immagine di sfondo, ma anche come fare affinchè l’immagine si adatti alla pagina del browser, senza usare javascript, ma solo CSS.
Sia il corpo della pagina che l’immagine (con id=”sfondo”) hanno larghezza e altezza di 100%, il margin e il padding sono azzerati.
Con la proprietà overflow evitiamo che vengano visualizzate le barre di scorrimento della finestra del browser. L’immagine è posizionata in modo assoluto per toglierla del flusso naturale della pagina e potere essere ridimensionata correttamente.
Ecco il codice HTML…
<body> <img src="bg.jpg" id="sfondo" alt="" /> </body>
…a cui associamo queste riche di CSS:
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#sfondo{
position:absolute;
height:100%;
width: 100%;
margin: 0;
padding: 0;
}
Ecco come appare il nostro esempio.
Un limite dell’esempio precedente è che l’immagine, adattandosi alla dimensione della pagina, di fatto si distorce. Vediamo come poter aggirare il problema.
Inseriamo in pagina questo:
<div id="bg"> <div> <table cellpadding="0" cellspacing="0"> <tr> <td><img alt="" src="bg.jpg" /></td> </tr> </table> </div> </div>
Ed ecco come impostare il CSS relativo:
html, body, #bg, #bg table, #bg td {
height:100%;
overflow:hidden;
width:100%;
}
#bg div {
height:200%;
left:0;
position:absolute;
top:0;
width:200%;
}
#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
}
#bg td {
text-align:left;
vertical-align:top;
}
Per vedere il risultato, ecco la pagina di esempio.
Ecco un aggiornamento al post con il quale segnalo un semplice plugin di jQuery che permette di aggiungere un’immagine di sfondo ridimensionata dinamicamente a una pagina qualsiasi. L’immagine verrà allunagata per adattarsi alla pagina, e verrà automaticamente ridimensionata quando l’utente cambia la dimensione della finestra.
Il plugin si chiama jQuery Backstretch, ed ecco come inserirlo:
<script type="text/javascript">
$.backstretch("http://farm3.static.flickr.com/2443/3843020508_5325eaf761.jpg");
</script>
Perfect Full Page Background Image
How to: CSS Large Background
100 percent background image in css
Inspiration: 80 Large Background Websites
Inspiration: Backgrounds In Web Design: Examples And Best Practices
Questo blog si offre come spazio di condivisione e conoscenza per tutti i webdesigner principianti che aspirano ad allargare le proprie conoscenze su html e css.
29 commenti a CSS: immagine di sfondo a tutto schermo
dario
dicembre 30th, 2009 at 12:38
bellissimo!!. giacomo puoi mettere on line le slide del tuo progetto liquidlife? http://www.paitadesign.com/liquidlife/progetto.html
dario
dicembre 30th, 2009 at 12:41
e poi il sito web e ankora visitabile? :D
Giacomo Paita
dicembre 30th, 2009 at 17:20
Il sito della mia tesi è online. Ti firmi Dario, ma ci conosciamo di persona?
dario
dicembre 30th, 2009 at 17:43
no piacere. ma a ke indirizzo e? manko su google lo trovato. era interessante ho visto anke il video, si possono vedere anke le slide del video?
Giacomo Paita
dicembre 30th, 2009 at 21:04
Se ti riferisci al sito del progetto di tesi, no, è rimasto solo a livello di concept; per quanto riguarda le slide del progetto, non sono online, perché credo che la mia presentazione sia già sufficiente. Mi fa piacere che tu lo trovi interessante: ti occupi di siti web? O di progetti legati all’ambiente?
100+ Quite Useful Articles for Designers and Developers | tripwire magazine
gennaio 12th, 2010 at 21:59
[...] CSS: immagine di sfondo a tutto schermo [...]
Marco
maggio 18th, 2010 at 16:42
Ciaoo! ma come devo impostarla la foto (dimensione e risoluzione) che poi si adatterà al tipo di monitor? grazie mille…
Giacomo Paita
maggio 18th, 2010 at 19:00
Ciao Marco, innanzi tutto grazie per aver letto il mio blog!
Puoi impostare la foto con queste dimensioni:
1024×768px a 72dpi, che sono le dimensioni dei monitor più diffusi.
Naturalmente, gli schermi più piccoli di questa dimensione non vedranno la foto ridimensionata, ma tagliata dalla finestra del browser. Per testare il risultato, dai un occhio alla pagina di esempio.
Per testare la pagina con le più diffuse risoluzioni del monitor, clicca su http://www.browize.com/ : ti permette di ridimensionare la finestra del browser. Una volta fatto, incolla l’URL del mio esempio.
Spero di essere stato esauriente.
Ciao e a presto!
Marco
maggio 19th, 2010 at 11:30
ma non pesa troppo l’immagine a quella dimensione?? grazie ancora
Marco
maggio 19th, 2010 at 14:38
ti faccio ancora una domanda…una volta messo lo sfondo..tutti gli altri div (header, corpo, footer..) dove li devo inserire per far si che mi centri tutto con lo sfondo? grazie…
Giacomo Paita
maggio 19th, 2010 at 18:56
Per il peso/qualità dell’immagine fai un po’ di prove: il mio era solo un esempio, vedi tu come impostare la qualità della jpg.
Per quanto riguarda la centratura degli elementi della pagina, ti conviene racchiuderli tutti in un div contenitore e assegnare ad esso questi stili per centrarlo in verticale e orizzontale:
#contenitore {
height:100px; /*qui ci metti l’altezza del tuo contenitore*/
width:100px;/*qui ci metti la larghezza del tuo contenitore*/
position:absolute; /*l’elemento è tolto del flusso naturale della pagina e posizionato in modo assoluto*/
top:50%; /*il bordo superiore dell’elemento si troverà al 50% dell’altezza disponibile*/
margin-top:-50px; /*la metà dell’altezza dell’elemento è tolta come margine superiore per centrarlo*/
left:50%; /*il bordo laterale sinistro dell’elemento si troverà al 50% della larghezza disponibile*/
margin-left:-50px; /*la metà dellla larghezza dell’elemento è tolta come margine sinistro per centrarlo*/
}
Così dovrebbe funzionare.
Ciao!
Marco
maggio 20th, 2010 at 12:47
però facendo come dici non si centra automaticamente alla pagina..ma rimane sempre nella stessa posizione…
Giacomo Paita
maggio 20th, 2010 at 13:27
Ho messo il codice che ti ho indicato in una pagina di esempio. Prova a guardare qui: http://www.paitadesign.com/examples/div-centrato/esempio-div-centrato.html
Il div verde è sempre centrato rispetto al suo genitore, che è la pagina. Prova a ridimensionare il browser: il div sarà sempre nel centro.
Ciao!
Marco
maggio 20th, 2010 at 14:19
ook funziona!!grazieee!! un’ultima cosa è normale che in dreamweaver nella progettazione il content mi va sotto lo sfondo? però quando faccio l’anteprima lo vedo giusto…grazieee ciao!!
Giacomo Paita
maggio 20th, 2010 at 14:34
Non tenere in considerazione la vista progettazione, usa DW solo come text-editor per il codice. Il risultato lo vedi nel bewser.
A presto. Ciao!
francesco garofalo
giugno 9th, 2010 at 22:40
ciao Giacomo!
io sono un neo arrivato nel mondo dw (da poche ore) e ho un dubbio esistenziale…tu dai il codice html e css. Sto provando a inserirli nel codice della mia pagina ma con scarso successo. Mi potresti dare una dritta su dove mettere uno ‘html’ e dove l’altro ‘css’.
grazie mille!!
Francesco
Giacomo Paita
giugno 10th, 2010 at 21:46
Ciao Francesco! Vedrai che di ora in ora diventerai sempre più esperto! Ecco una guida sommaria, con alcuni link utili. Per prima cosa, crea una nuova pagina HTML con Dreamweaver :
Ctrl +N. Poi, nel pannello devi specificare la codifica dei caratteri (di solito UTF-8 oppure ISO 8859-1) e impostare il DOCTYPE delle tue pagine. Una volta creata la tua prima pagina HTML, inserisci nel tagheadil collegamento al file CSS. Nel tagBODY, devi inserire il codice HTML.Per tutti i miei tutorial ho inserito il codice CSS in pagina, pratica non ortodossa, e sconsigliabile come "modus operandi", ma adatta per le demo veloci del mio blog. A presto, ciao! Giac
francesco garofalo
giugno 12th, 2010 at 19:18
Fantastico!ora ho una bellissima immagine centrata. Grazie mille!!
ne approfitto e ti faccio un’altra domanda con cui potrei definire il sito: prima di aver voluto mettere l’immagine di sfondo a tutta pagina avevo i miei png linkati, che costituivano il mio semplice sito. Ora l’immagine mi ha tolto lo spazio e tutto quel che aggiungo va di lato. Se fosse possibile vorrei sovrapporle, e possiblimente, mantenere i miei ”behaviour>effects” che avevano i miei png linkati, e che non assumano la caretterstica che ha l’immagine di sfondo, quella di adattarsi ai vari schermi, ma rimanere in scala 1:1.
spero essere stato compresibile, e ti ringrazio tantissimo per le tue dritte!!
ciao,
francesco
Giacomo Paita
giugno 13th, 2010 at 00:10
Credo di aver capito: devi inserire i tuoi contenuti in un
divposizionatorelativeoabsolute(vedi risposta in questa pagina e link su come centrare un div).Per quanto riguarda i
behaviours, personalmente non li ho mai usati. Se vuoi incominciare a mettere degli effetti, ti consiglio una libreria Javascript esterna (se sei a digiuno anche di quella, leggiti il mio post di introduzione a jQuery e un po’ di informazioni su cosa puoi fare.).Per i
.png, infine, occhio alla compatibilità con IE6.Valuta se le
.pngsono il formato adatto di immagine, oppure se potrebbero andare bene anche delle.gifo.jpeg.Giac
Tiziano
luglio 1st, 2010 at 09:04
Ciao, volevo ringraziarti per questo articolo, mi è stato molto utile. Se posso volevo farti due domande:
1. come posso inserire più box sovrapposti allo sfondo e posizionarli dove voglio (hai suggerito di mettere tutto in un unico contenitore dando anche le indicazioni per centrarlo, ma se volessi inserirne uno centrato e uno da un’altra parte?
2. Ho dato un’occhiata al codice html del sito http://www.ringvemedia.com citato nell’articolo delle letture da te consigliate “Perfect Full Page Background Image” e ho riscontrato una differenza imprtante: mentre l’articolo prevede l’inserimento nel body html dell’immagine, il sito http://www.ringvemedia.com sembra non prevederlo, ma si limita ad impostare correttamente un’immagine di background nel css esterno. Il risultato è molto simile, ma ci tenevo a capire e imitare lo stile di quel sito che è fatto veramente bene..
Grazie!
Tiziano
Giacomo Paita
luglio 1st, 2010 at 18:59
Ciao Tiziano!
Ecco le risposte:
1. per posizionare i box sopra lo sfondo puoi fare come è stato fatto nel sito ringvemedia.com per gli elementi con
id="menu"eid="cont". Sono posizionatiabsolute. Per funzionare correttamente devono avereheightewidthdichiarate, e si posizioneranno relativamente al primo genitore che siarelativeoabsolute. Per dare un occhio al codice, usa Firebug, è ottimo.2. non vedo dove sia la differenza! Guarda il codice CSS del sito e controlla l’HTML con Firebug. L’immagine di sfondo è in pagina, non via CSS.
Spero di esserti stato di aiuto. Alla prossima.
Giac
Tiziano
luglio 2nd, 2010 at 07:30
Grazie mille Giacomo! Per entrambi i punti, specie sul 2 ho preso una svista…saluti!
Tiziano
Marco
luglio 5th, 2010 at 11:11
Ciao!! questa volta ho un file swf di dimensioni 759px (larghezza) x 582 px però non riesco a centralo rispetto a tutti i monitor come faccio?? grazie mille!!
Giacomo Paita
luglio 5th, 2010 at 12:22
Ciao! Posta un URL di prova.
Marco
luglio 5th, 2010 at 14:49
non è online ..se vuoi te lo posso inviare!
Giacomo Paita
luglio 5th, 2010 at 19:05
Se non hai posibilità di metterlo online, posta direttamente il codice nel commento.
Marco
luglio 5th, 2010 at 19:16
ok…
Documento senza titolo
<!–
Il contenuto di questa pagina richiede una nuova versione di Adobe Flash Player.
<!–
swfobject.registerObject(“FlashID”);
html, body, #bg, #bg table, #bg td {
height:100%;
overflow:hidden;
width:100%;
}
#bg div {
height:200px;
left:0;
position:absolute;
top:0;
width:200%;
z-index: 1;
}
#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
z-index: 1;
}
#bg td {
text-align:left;
vertical-align:top;
z-index: 1;
}
#contenitore {
height:582px; /*qui ci metti l’altezza del tuo contenitore*/
width:759px;/*qui ci metti la larghezza del tuo contenitore*/
position:absolute; /*l’elemento è tolto del flusso naturale della pagina e posizionato in modo assoluto*/
top:50%; /*il bordo superiore dell’elemento si troverà al 50% dell’altezza disponibile*/
margin-top:-250px; /*la metà dell’altezza dell’elemento è tolta come margine superiore per centrarlo*/
left:50%; /*il bordo laterale sinistro dell’elemento si troverà al 50% della larghezza disponibile*/
margin-left:-250px;
z-index: 3;
}
#header {
float: left;
width: 545px;
position: relative;
height: 139px;
z-index: 3;
}
Marco
luglio 5th, 2010 at 19:17
non mi copia l’html!
Documento senza titolo
<!–
Il contenuto di questa pagina richiede una nuova versione di Adobe Flash Player.
<!–
swfobject.registerObject(“FlashID”);
Marco
luglio 5th, 2010 at 19:38
sono riuscito..non avevo calcolato la metà dell’oggetto da inserire nel margin-top e left..
grazie lo stesso!!!