paitadesignblog

HTML, CSS e tutto il resto

CSS: immagine di sfondo a tutto schermo

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…

…a cui associamo queste riche di CSS:

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:

Ed ecco come impostare il CSS relativo:

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:

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:

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

48 Comments

  • dario |

    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 |

    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 |

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

  • Giacomo Paita |

    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 |

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

  • Marco |

    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 |

    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 |

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

  • Marco |

    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 |

    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 |

    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 |

    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 |

    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 |

    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 |

    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 |

    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 |

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

  • Marco |

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

  • Marco |

    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 |

    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 |

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

    grazie lo stesso!!!

  • elena |

    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 |

    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 |

    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 |

    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 |

    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 |

    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 |

    Ciao Cinzia, prova a mettere nel foglio di stile

    associato al contentore, nel tuo caso, credo sia il

    . Ciao!

  • Cinzia |

    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

  • Cinzia |

    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 |

    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 |

    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 |

    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 |

    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

Post a comment