Back to blog

CSS: immagine di sfondo a tutto schermo

28 dicembre 2009 - Posted in CSS , Webdesign Posted by:

Tags: , , , , , , ,

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("images/immagineDiSfondo.jpg");
</script>

Lo script inserisce un div posizionato fixed (contenente l’immagine di sfondo) subito dopo il tag body:
il plugin quindi non è compatibile con IE6, dato che quest’ultimo non interpreta correttamente la proprietà fixed.

Ecco allora un trick da utilizzare per ottenere un cross-browsing completo (se avete qualche altro consiglio/seganalzione sul codice seguente, aggiungete un commento!).
Dichiarariamo solo per IE6 l’immagine di sfondo del body, attraverso un commento condizionale, direttamente in pagina:

<!--[if IE 6]>
    <style>
      body {
        background:url(images/immagineDiSfondo.jpg) fixed center top no-repeat;
        }
    </style>
  <![endif]-->

…e attiviamo il plugin per tutti i browser, tranne IE6, con la seguente dichiarazione:

jQuery.each(jQuery.browser, function(i) {
  if($.browser.msie && $.browser.version <= 6 )
    { /*Se il browser è uguale a IE6: Non fare niente*/ }
  else
  { /*Altrimenti: Esegui il plugin*/
    $.backstretch("images/immagineDiSfondojpg");}
  })


Chi ha letto questo articolo, ha gradito anche:

  1. CSS: Bottoni espandibili con una sola immagine
  2. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

48 Comments

dario 1570 giorni ago

bellissimo!!. giacomo puoi mettere on line le slide del tuo progetto liquidlife? http://www.paitadesign.com/liquidlife/progetto.html

dario 1570 giorni ago

e poi il sito web e ankora visitabile? :D

Giacomo Paita 1570 giorni ago

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

dario 1570 giorni ago

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 1570 giorni ago

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?

Marco 1431 giorni ago

Ciaoo! ma come devo impostarla la foto (dimensione e risoluzione) che poi si adatterà al tipo di monitor? grazie mille…

Giacomo Paita 1431 giorni ago

Ciao Marco, innanzi tutto grazie per aver letto il mio blog!

Puoi impostare la foto con queste dimensioni:
1024x768px 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 1430 giorni ago

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

Marco 1430 giorni ago

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 1430 giorni ago

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 1429 giorni ago

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

Giacomo Paita 1429 giorni ago

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 1429 giorni ago

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 1429 giorni ago

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 1408 giorni ago

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 1407 giorni ago

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

francesco garofalo 1406 giorni ago

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 1405 giorni ago

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

Tiziano 1387 giorni ago

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 1387 giorni ago

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

Tiziano 1386 giorni ago

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

Marco 1383 giorni ago

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 1383 giorni ago

Ciao! Posta un URL di prova.

Marco 1383 giorni ago

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

Giacomo Paita 1383 giorni ago

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

Marco 1383 giorni ago

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 1383 giorni ago

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 1383 giorni ago

sono riuscito..non avevo calcolato la metà dell’oggetto da inserire nel margin-top e left..

grazie lo stesso!!!

Ciro 1255 giorni ago

Ottimo il tuo blog, ti aggiungo

e grazie per il post, molto chiaro e ben fatto ;)

elena 1255 giorni ago

ciao giacomo :)

prima di tutto grazie per le tue condivisioni in questo blog! cerca cerca vi sono approdata e mettendo insieme quello che consigli in questo e nel post sull’eliminare il tratteggio di un’area cliccabile spero di riuscire a risolvere la difficoltà che sto affrontando.

ti spiego: volevo creare un’intro/splash page per un sito, una semplice pagina bianca con solo un’immagine/logo al centro e sotto qualche riga di testa, il tutto che fungesse da link alla main page.

sto lavorando non DW ma direttamente con joomla. ho studiato html qualcosa come 15 anni fa e più tardi webmastering con DW ma poi non ci ho mai lavorato, per cui ora aver a che fare con un CMS e soprattutto con fogli CSS è tutto nuovo per me (ma anche.. appassionante ;)). ad ogni modo, sono riuscita a ottenere la mia pagina intro utilizzando un altro template che ho svuotato delle immagini che davano il layout grafico e ho ottenuto l’effetto voluto semplicemente mettendo quei contenuti in un articolo pubblicato sulla voce di menu corrispondente. ho risolto il problema degli URL (ora l’intro punta correttamente a “sito.ext” e immagine e testo linkano a “sito.ext/home”), ma effettivamente ero infastidita dall’effetto grafico dato dal box tratteggiato che compare una volta che ci si clicca sopra.

seguendo il tuo succitato articolo, proverò a inserire il parametro ‘outline:none’ per risolvere quell’aspetto, ma quando pensavo appunto a possibili soluzioni mi ero chiesta se per caso non avrei potuto ottenere questa semplice pagina di intro in modo più facile e pulito giusto inserendo un’immagine (posso benissimo metterci anche il testo già dentro) come background nel body della pagina. solo.. non sapevo come farlo!

leggendo ora questo post, spero di riuscire a farlo. solo, ho un paio di cose di cui vorrei essere certa: voglio infatti evitare che venga ridimensionata a seconda della finestra del browser (come invece avviene nella pagina d’esempio che hai postato, con la città di sfondo) perché si tratta nel mio caso in realtà solo di una immagine di media/piccola grandezza le cui dimensioni devono restare sempre fisse. e, dev’essere sempre centrata in pagina.

riguardo a questa seconda cosa, credo di aver capito dai vari interventi che basta settare in modo che venga mantenuta sempre a una distanza del 50% da sopra e sinistra.
ma, come fare invece per mantenere fisse le sue dimensioni, che parametri impostare? (immagino sia una domanda banale per chi lavora con i codici abitualmente, ma come detto per me invece è ancora tutto piuttosto nuovo)

anche, avresti voglia di dirmi anche già come rendere poi tutta l’area un link?

ti ringrazio molto se avrai modo di darmi consigli, perché mettere assieme tutte queste info da più fonti per ottenere poi del codice che funzioni mi crea un po’ di ansia! (ho paura di generare errori che poi magari mi creano ancora più difficoltà di soluzione..)

un caro saluto :)

elena 1255 giorni ago

ps: in attesa di risposta devo dire che ho già provato a togliere il bordo tratteggiato all’immagine e testo che ho al momento sulla pagina, usando ‘outline’, ma non ho ottenuto alcun risultato, per cui mi sa che mi sarà proprio utile risolvere la questione ‘pagina di intro’ con un’immagine di sfondo..

paolo 1253 giorni ago

ciao sto cercando di inserire in un sito una immagine come sfondo, e sto seguendo alla lettera il tuo esempio con il plug in jquery ma non funziona. Nella head io ho scritto questo:

$.backstretch(“imm/bg_image.jpg”);

body { background:url(imm/bg_image.jpg) fixed center top no-repeat; }

jQuery.each(jQuery.browser, function(i) {

if($.browser.msie && $.browser.version <= 6 )

{ /*Se il browser Ë uguale a IE6: Non fare niente*/ }

else

{ /*Altrimenti: Esegui il plugin*/

$.backstretch("imm/bg_image.jpg");}

})

ma l'immagine non mi viene visualizzata e mi compare il monitor bianco con la scritta :

jQuery.each ecc ecc…

come posso risolvere questo problema????

confido in un tuo consiglio

grazie paolo

Giacomo Paita 1252 giorni ago

:-)

Giacomo Paita 1252 giorni ago

Ciao Paolo, per usare il plugin “backstretch” devi sapere prima come inserire correttamente i CSS e il codice JavaScript. Segui i tutorial che ti ho indicato, poi prova di nuovo a utilizzare il plugin: vedrai che non avrai nessun problema. Ciao!

Giacomo Paita 1252 giorni ago

Ciao Elena, ecco schematizzate le risposte alle tue domande, con i link ai tutorial:

  1. usare intro/splash-pag ha i suoi pro e contro: valuta tu in base alle tue esigenze / gusto personale (il mio consiglio è di non usarle per niente!)
  2. le immagini sono elementi a livello di blocco, che hanno dimensioni intrinseche. Tu dichiarale comunque all’interno del tag <img />
  3. inserisci l’immagine in pagina. Per linkarla, inseriscila dentro un tag anchor, e centralo verticalmente e orizzontalemnte con i CSS.
  4. per quanto riguarda il bordo tratteggiato, per adesso non me preoccuperei.

Segui i link che ti ho indicato, fai un po’ di prove, vedrai che tutti i tuoi dubbi verranno chiariti! Purtroppo su Joomla non posso aiutare… :-(

Ciao, a presto!

elena 1251 giorni ago

giacomo, grazie!

senz’altro leggerò i tutorial indicati e farò prove per trovare la soluzione adatta.

ancora grazie per questi tuoi interessanti e utili post, e per la tua cortesia e precisione nel rispondere!!

un caro saluto!

ps: nel frattempo sono cmq riuscita a usare anche l’outline :D

Cinzia 1248 giorni ago

ciao

premetto che uso dreamweaver cs3,sono alle prime armi sia con questo software che nella realizzazione di pagine web e anche per quanto riguarda Html ecc…e ho trovato questo blog che fà il caso mio.Stò realizzando il mio primo sito ma ho un problema di centrare e adattare le pagine web a qualunque risoluzione del monitor,le pagine che stò creando sono da 1024×768 (nello standard) mi sorge un problema,quando queste pagine le apro dal browser, sempre alla risoluzione 1024 compare in fondo alla stessa la barra di scorrimento,non capisco il perchè! mi puoi aiutare?
se ti serve inserisco il codice della mia pagina, così si capisce meglio il problema…

grazie mille!! :)
Cinzia

Giacomo Paita 1248 giorni ago

Ciao Cinzia, prova a mettere nel foglio di stile

overflow-x: hidden;

associato al contentore, nel tuo caso, credo sia il

body

. Ciao!

Cinzia 1247 giorni ago

ciao

inserisco il codice che mi ha generato dreamweaver:
tanto per farti capire come è impostato il codice.
c’è uno sfondo realizzato con una piccola immagine ripetuta,sovrapposta a questo all’interno di un div c’è
un’immagine di 1024×768,è questa immagine che vorrei centrata e
compatibile con qualsiasi risoluzione del monitor
dove dovrei inserire la tua istruzione?

grazie
ciao

Documento senza titolo

Giacomo Paita 1247 giorni ago

Il documento inserito nei commenti del blog non si vede: carica tutto online sul tuo spazio web e posta il link. Ciao!

Cinzia 1247 giorni ago

opss…come faccio a postare il codice quì?

ciao

Cinzia 1247 giorni ago

purtroppo non inserisco in pubblico il mio lavoro finchè non è finito :)

posso inviare il codice alla mail che è presente quì sotto nel tuo blog?

ciao

Giacomo Paita 1247 giorni ago

Manda tutto in un pacchetto zip/rar (file.html, eventuali CSS o JS, e le risorse grafiche inserite nel documento). vediamo un po’ cosa si può fare… :-)

Cinzia 1247 giorni ago

mandato!

spero ci sia tutto!

ciao
Cinzia :)

Cinzia 1247 giorni ago

ciao

scusami,non per metterti fretta,ma mi sono accorta di aver
fatto un errore con l’inserimento del mio indrizzo di posta percui
forse non ti è arrivato.
fammi sapere!

ciao

Giacomo Paita 1217 giorni ago

Ciao Manuel! Allora, se ho capito bene la tua domanda è: “Quando inserire una immagine tramite CSS e quando invece inserirla in pagina”, giusto? Diciamo per prima cosa che i CSS servono sia per organizzare sia per definire lo stile del contenuto. Sono due cose diverse: nel primo caso mi servono per disporre i in pagina tutti quei contenuti che devono essere poter fruiti anche disattivando i fogli di stile. Ma essi servono anche per definire lo stile di presentazione dei contenuti stessi. Nel caso del post sull’immagine di sfondo, tutte le tecniche proposte utilizzano un’immagine in pagina resa scalabile tramite i CSS e/o con jQuery, dato che non è possibile adattare lo sfondo di un elemento tramite la proprietà background dei CSS. In questo caso, in effetti, viene utilizzato un elemento in pagina non in modo strutturale, ma per fini decorativi (anche se per il plugin di jQuery l’inserimento è gestito al caricamento della pagina, e non scritto direttamente in pagina). Spero di essere stato chiaro! A presto!

luciano 1158 giorni ago

ciao io ci ho provato in tutti modi niente da fare mi viene distorta l’immagine non so dove sbattere la testa qualcuno mi aiuta a fare i mio sito sono un fotografo purtroppo anche povero

Lascia un Commento

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>