CSS: immagine di sfondo a tutto schermo

In: CSS| Webdesign

28 dic 2009
Articolo scritto 256 giorni fa

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.

Immagine di sfondo al 100%

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.

Immagine di sfondo scalabile

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.

jQuery: Immagine di sfondo scalabile!

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>


Potresti essere interessato anche ai seguenti articoli:

  1. CSS: Bottoni espandibili con una sola immagine
Giacomo Paita

è un Web Designer / Grafico che ama sperimentare con CSS e HTML.
Scrive questo blog per condividere tecniche e codice per siti stabili e puliti.

29 commenti a CSS: immagine di sfondo a tutto schermo

Avatar

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

Avatar

dario

dicembre 30th, 2009 at 12:41

e poi il sito web e ankora visitabile? :D

Avatar

Giacomo Paita

dicembre 30th, 2009 at 17:20

Il sito della mia tesi è online. Ti firmi Dario, ma ci conosciamo di persona?

Avatar

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?

Avatar

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?

Avatar

100+ Quite Useful Articles for Designers and Developers | tripwire magazine

gennaio 12th, 2010 at 21:59

[...] CSS: immagine di sfondo a tutto schermo [...]

Avatar

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…

Avatar

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!

Avatar

Marco

maggio 19th, 2010 at 11:30

ma non pesa troppo l’immagine a quella dimensione?? grazie ancora

Avatar

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…

Avatar

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!

Avatar

Marco

maggio 20th, 2010 at 12:47

però facendo come dici non si centra automaticamente alla pagina..ma rimane sempre nella stessa posizione…

Avatar

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!

Avatar

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!!

Avatar

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!

Avatar

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

Avatar

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 tag head il collegamento al file CSS. Nel tag BODY, 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

Avatar

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

Avatar

Giacomo Paita

giugno 13th, 2010 at 00:10

Credo di aver capito: devi inserire i tuoi contenuti in un div posizionato relative o absolute (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 .png sono il formato adatto di immagine, oppure se potrebbero andare bene anche delle .gif o .jpeg.

Giac

Avatar

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

Avatar

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" e id="cont". Sono posizionati absolute. Per funzionare correttamente devono avere height e width dichiarate, e si posizioneranno relativamente al primo genitore che sia relative o absolute. 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

Avatar

Tiziano

luglio 2nd, 2010 at 07:30

Grazie mille Giacomo! Per entrambi i punti, specie sul 2 ho preso una svista…saluti!
Tiziano

Avatar

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!!

Avatar

Giacomo Paita

luglio 5th, 2010 at 12:22

Ciao! Posta un URL di prova.

Avatar

Marco

luglio 5th, 2010 at 14:49

non è online ..se vuoi te lo posso inviare!

Avatar

Giacomo Paita

luglio 5th, 2010 at 19:05

Se non hai posibilità di metterlo online, posta direttamente il codice nel commento.

Avatar

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;
}

Avatar

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”);

Avatar

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!!!

Inserisci un tuo commento

Home

About

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.

Commenti recenti