Full Background image con CSS e quindi Responsive

da miniMACAggiornato il 07-06-2020
CSS

Oggi mentre parlavo con una persona su Skype, mi ha chiesto come poter inserire una immagine a schermo intero ma che fosse sempre visibile in tutte le sue parti e senza nessun margine bianco ai lati, sopra o sotto.

Per questo vi consiglio di usare questa tecnica sempre con i CSS per poter avere una immagine in background in full screen, ovvero a tutto schermo.

Per prima cosa dovete inserire un div subito dopo il tag body della vostra pagina

e poi inserire come qui da esempio il codice CSS necessario

Ecco fatto! Avete risolto il vostro problema e credo che questa sia una delle soluzioni migliori, ma come sempre se avete suggerimenti sarò lieto di accettarli e condividerli!

78 commenti su Full Background image con CSS e quindi Responsive

  2. Ciao MiniMAC, complimenti per il bel blog, strano che l’ho scoperto solo oggi 🙂

    Comunque penso che in questo codice ci sia un problema: sei sicuro che nel body non ci sia bisogno di includere la regola height: 100% ?
    Altrimenti il background non sarà lungo per tutto l’height della pagina… credo.

    Rispondi

  3. Ciao Andrea, ottima osservazione, ma lo avevo dato per scontato 🙂

    Comunque, nel body non c’è bisogno. Il codice esatto deve andare direttamente al tag “html” come questo

    html { width: 100%; height: 100%; height: auto; }

    Tutto qui!

    Rispondi

  5. Ciao complimenti è proprio quello che cercavo, pero’ ti volevo chiedere se dovessi rendere l’immagine cliccabile che punta ad una nuova pagina come faccio mantenendo l’immagine responsive?
    Grazie

    Rispondi

  7. Grazie ottima soluzione.
    Però ho notato che se aggiungo
    background-position: center…… in #tuodiv….. il risultato migliora notevolmente

    Rispondi

  9. Ottimo, l’unico metodo che abbia funzionato con me.

    Volevo chiederti, con un
    background-position: center
    può cambiare/migliorare qualcosa?

    Grazie in anticipo

    Rispondi

    1. Ciao Matteo, dipende dal caso e dal design del sito che scegli. Tieni conto però che come vedi dal codice l’immagine è già centrata!

  12. Molto interessante. Devo provarci.
    Una sola domanda: le dimensioni della foto che fungerà da sfondo?
    Lo chiedo perché è da ieri che mi sto scervellando in quanto l’immagine mi viene sempre tagliata e non posso controllarne il “taglio”.
    P.S. sono un neofita di CSS
    Grazie,
    Nello.

    Rispondi

    1. Ciao Nello,

      dovrei vedere bene la tua pagina e se per caso vi sono errori, nel caso mettimi qui un link dove posso vedere! Ciao e grazie!

  13. Una domanda: è possibile rendere un’immagine messa come sfondo, linkabile? senza aggiungere altro. Vedi esempio:
    #header
    {
    background: url(‘http://www.miosito.it/img/logo.png’);
    background-position:center;
    padding:35%;
    background-size:98%;
    background-repeat:no-repeat;
    src: url(‘http://www.altrosito.it/’);
    }
    Grazie a tutti. ciao

    Rispondi

    1. Ciao Francesco, assolutamente no, dovresti usare il tag “a” esattamente ed avere almeno un “href”!

  14. Ciao, il mio tema wp adotta proprio questa soluzione, ma io vorrei sostituire l’immagine di bg con una slideshow (più immagini che cambiano ad intervallo regolare), ho il codice php generato dal plugin, ma ho capito che se non modifico il file css non lo vedrò mai nella posizione e nella dimensione che desidero.
    Puoi aiutarmi?
    Grazie

    Rispondi

    1. Ciao Luca, a mio avviso la soluzione più semplice e per farlo senza plugins e neppure javascript è usare appunto CSS3. Crei sempre il div come nell’esempio sopra, però aggiungi le transitions. Un esempio può essere quello di cambiare il background della immagine ogni 10 secondi e di ripetere la animations all’infinito.
      Ora sto lavorando ad un progetto, ma sicuramente mi hai dato lo spunto per creare un tutorial proprio su questo e vedrò di farlo a breve! Grazie

  15. Ciao, sto cercando di aiutare un’amica, il sito che ha è responsive e le immagini vengono sempre tagliate, il webmaster dice che è normale perchè è responsive, però dal tuo post sembra che il problema sia evitabile, mi dai un parere per favore? sito ferrante.it . Grazie, Barbara

    Rispondi

    1. Ciao Barbara, assolutamente è tutto possibile. Purtroppo qui in Italia c’è gente che non vuole evolvere le proprie conoscenze. Se hai bisogno posso darti una mano visto che si tratta di pochi secondi di lavoro. 🙂

  16. Wow… sei gentilissimo, ti ringrazio! Purtroppo non ho le chiavi di accesso… Intanto ti ringrazio però per avermi dato il parere, perchè ovviamente posso insistere affinchè il webmaster risolva il problema, se non lo fa ti ricontatto via mail. Grazie infinite, Barbara

    Rispondi

  17. Guida molto interessante e utile in questi giorni!
    Mi potresti dire l’aspect ratio che deve avere l’immagine di sfondo? Timo 1280 X ??
    Grazie dell’aiuto
    Manuela

    Rispondi

    1. Ciao Manuela, di solito non c’è un vero e proprio standard in giro, anche se andrebbe rispettato, comunque puoi stare in altezza sui 768px circa.

  19. Ciao! Io ho un problema, la foto che ho caricato come sfondo, ad alta risoluzione viene tagliata.. Esiste un comando Css che mi sono persa per vedere la immagine nella sua interezza a qualsiasi risoluzione? Se sei così gentile da aiutarmi ti invio il link della pagina. Il problema è che sto lavorando con un tema wordpress che il cliente mi ha scelto.

    Ti ringrazio tantissimo in anticipo!

    Rispondi

    1. Ciao Vanessa, in teoria con la proprietà background cover dovrebbe per forza venire intera la foto a qualsiasi risoluzione, magari inserisci il link, potrebbe essere solo un discorso di CSS per quanto riguarda la cascata delle direttive

    1. Grazie, per risolvere devi mettere questa regola a .header-wrapper .header-bg { background-position: inherit; }

  21. Ciao, interessantissimo. Posso chiedere e proporre una variante?

    Vorrei mettere nella pagina un DIV che abbia un immagine di background.

    L’immagine è 800×600 ma non importa la dimensione, infatti l’obbiettivo è di vederla sempre interamente e quindi responsive E SOPRATUTTO anche se il div fosse vuoto, quindi che si restringe o si allarga a seconda della dimensione della finestra del browser.

    Il DIV vorrebbe occupare la (o dovrebbe essere la) porzione centrale di una row bootstrap 3-6-3

    Puoi cortesemente illuminarmi?

    Grazie
    Robert

    Rispondi

  22. Ciao, articolo interessantissimo, sto lavorando su un sito wordpress, ho appena sostituito l’immagine di sfondo, ma non mi risulta essere più responsive. Forse il tema non include di base questa funzione. Sapete dirmi come fare per renderla responsive? Grazie mille!

    Rispondi

  23. Vedo che “responsive” significa che negli schermi piccoli l’immagine della home page è fortemente tagliata ai due lati e si vede solo il centro. Se per varie ragioni l’immagine così tagliata perdesse di significato, che fare? Sostituirla con una super-tagliabile? Non è pensabile di vederla più piccola, come nelle immagini delle “pagine” successive che invece prendono la dimensione del display, lasciandosi tranquillamente ridurre sena perdere pezzi? Grazie, Sandra

    Rispondi

    1. Sandra non riesco a capire cosa volessi dire. Magari posta un esempio di quello che dici su codepen. Per capire!

  25. Perdonami, non sono del mestiere, cercavo solo di capire le spiegazioni ricevute dal web designer di un sito per il quale sto preparando i contenuti. Posso dirlo così: perché il meccanismo del responsive funziona solo per la home page e non per le sezioni successive? Nelle quali sezioni una foto larga si riduce più meno secondo lo schermo da cui si vede il sito, senza essere tagliata ai lati? Meglio di così non riesco a esprimermi, se non è chiaro pazienza, grazie lo stesso.

    Rispondi

    1. Se ho capito bene puoi guardare da CSS la proprietà background-size che può essere contain o cover. Se vuoi che l’immagine si veda nella sua completa larghezza puoi usare cover!

  26. Ciao e grazie per il suggerimento: facile e sintetico.

    Ho notato però che non viene interpretato bene con i browser Chrome ( l’immagine di fondo sparisce).
    Ti risulta?

    Rispondi

  27. Ciao! Io vorrei usare un immagine full (schermo intero) che però comprenda solo il 50% dello schermo, in particolare solo la metà sinistra (left). Per la visualizzazione su pc non ho problemi. Per i mobile non so proprio come fare. Qualcuno può aiutarmi? Spero di essermi spiegata!

    Rispondi

  28. Ciao, ho iniziato da poco a occuparmi di siti responsive e ho una difficoltà. Mi piacerebbe far ruotare l’immagine di background dell’homepage, senza stravolgere il mio lavoro. Nel file CSS ho inserito questo comando:
    .slidehome{
    background: transparent url(../images/foto.jpg) no-repeat 0px 0px;
    background-size: cover;
    padding: 5em 0;
    }
    Esiste una soluzione semplice oppure devo rinunciare? Ti ringrazio in anticipo…

    Rispondi

    1. Per ruotare intenti una rotazione tipo 80°, 45° , ecc.. oppure una rotazione di immagini multiple?

  29. ho necessità di rendere full size lo slide di questo plugin di wordpress. Cerco di spiegarmi, lo slide è già 100% wide e responsive, però è dentro un blocco del tema wp che non riesco a far diventare full screen. il sito è aggiornaweb.it/publidea e lo slide è quello iniziale. il tema supporta uno slide wide ma ha uno strano modo di essere responsive in quanto da cellulare visualizza solo un angolo in alto a sinistra e non ridimensiona l’immagine pertanto devo sostituirlo con uno slide da plugin esterno usando l’area custom invece dello slide di default. (il tema è Alchem pro di MageeWp).
    Ma qualsiasi cosa metto nel campo custom non mi usa tutta la larghezza dello schermo e quindi non è full wide come lo slide di default. Posso editare il .css ma non so come modificarlo. se utile posso copiare il .css
    Please, necessito di una soluzione, grazie.

    Rispondi

  31. ho trovato questa modifica al css per stringere l’altezza dello sfondo wide:
    .alchem-home-section-0 .magee-section {
    height: 400px!important;
    min-height: 400px!important;
    }
    mi chiedevo se potevo personalizzare questo (ma in che modo??) per far si che diventi full screen
    ho provato così ma non va
    .alchem-home-section-0 .magee-section {
    width: 100%!important;
    }

    Rispondi

  33. Ciao Minimac, il tuo sito è minimale e perciò piacevole!Ho creato anch’io un sito ma non con wordpress bensì con processwire. Il vantaggio è che con questo open source posso personalizzare ogni singola pagina del sito senza bisogno di studiare il linguaggio di traduzione delle regole wordpress. Tutto si implementa in un progetto complessivo così come è nato, “nature”. Però, dovrei conoscere il puro linguaggio css, js e compagnia bella.Vaboh. Ho scaricato dei quadri css per siti presenti online gratuitamente.Divertendomi alquanto, li ho personalizzati ed applicati. Ottimo!Ho scelto un background animato, ottimo! Cambia immagine ogni 3 secondi e le immagini sono solo 3, prese da splash.com quindi anch’esse senza diritti da pagare. Ottimo! Sono disoccupato!Il problema è che ho visto che questo genere di background, controllato da un polposo file js, quando si riduce grandezza smarthphone, sparisce!Accennavi a background IN TRANSIZIONE con semplice codice css e non js, magari mi conviene sommamente tale soluzione!Ma il codice? :/

    Rispondi

  34. cioè ridotto lo schermo le immagini di background si dimezzano o si riducono di 3 quarti… restando metà sfondo bianco e l’altra metà (o una striscia) con foto… boh

    Rispondi

    2. Non c’è! L’ho messa, ma è come se non l’avessi messa! Infatti nel mio file css non c’è nessunissimo riferimento all’indirizzo delle 3 immagini di BACKGROUND e al loro nome, essendo invece nominate e controllate dal file js sopra detto… forse devo scrivere qualcosa dentro quel file js! In alternativa sostituire quel file con un file css che parli di IMMAGINI IN TRANSIZIONE, ma non ne ho il codice… Cmq penso sia per questo motivo che la regola che mi hai consigliato non funziona… non tocca l’oggetto del problema! 

    3. Inoltre come ti dicevo sul cell lo sfondo si vede non sono a metà (metà coperto e metà bianco), ma quella metà è pure deformata… 

    4. Ciao Francesco, cerca di fornirmi il codice in qualche modo, per esempio con jsfiddle o codepen

  35. Grazie amico mio! Sono incappato in questo articolo cercando una soluzione al problema del background che non rimaneva centrato quando stringevo la finestra e ho risolto grazie a te dopo un’ora di tentativi e ricerche 😀 

    Rispondi

  36. Salve a tutti,spero di essere nella conversazione giusta. Ho realizzato un sito con WP che, con piccoli accorgimenti, rende perfettamente anche nella versione responsive. Ho  solo un problema. Nella versione desktop la home è composta da un meno sidebar a sinistra (che occupa 1/4 della schermo) e da uno slider a scorrimento verticale che occupa la porzione restante. Lo slider in realtà è così composto: le immagini sono inserite in quattro righe all’interno della pagina home. Era una impostazione del tema, tanto che ho anche faticato a capire dove andar a modficare le immagini, perché sembrava uno slider a tutti gli effetti, mentre credo siano righe contenti immagini alle quali è stato assegnato un movimento di scroll nel codice.  Nella versione responsive non compare lo slider e le mie quattro immagini vengono tagliate in porzioni orizzontali, come a creare un’unica immagine che così riempie la home della versione mobile. Credo di dover inserire dei media queries nel css ma non l’ho mai fatto. Io vorrei che nella versione mobile si vedesse anche solo una foto fissa,non tutte le strisce che vedo adesso. Questo è il link http://www.perincisoceramica.com Spero che qualcuno possa aiutarmi. Saluti,Amalia

    Rispondi

  37. Ciao miniMAC complimenti per il tuo sito e il suo contenuto 😉 Potresti dirmi con cosa hai strutturato la sezione commenti? Grazie

    Rispondi

    1. Ciao Tommaso grazie! La sezione commenti é quella di default in tutti i WordPress!

  38. mi aiuti con il mio header? l’immagine si ripete odiosamente e non so come prevenire questa questione senza ricorrere ad un override del template o ad una modifica dello stesso.

    il sito è http://www.barrotto.com!

    ciao, grazie

    Rispondi

    1. Ciao Gian Mario, devi semplicemente aggiungere la regola CSS background-repeat: no-repeat;

  39. Ciao MIniMAC!
    Che blog davvero super interessante! Complimenti! 🙂

    Sono nuovissima nel mondo web ed ora mi trovo in difficoltà con delle immagini di background.

    Mi piaceva molto l’effetto dell’immagine fissa di backround ma sto riscontrando un problema che non riesco a capire come risolvere… Provo a chiedere a te perchè hai sempre delle super soluzioni!

    Utilizzo wordpress e, seguendo un tutorial ho inserito delle immagini di sfondo per varie row utilizzando questo codice css (ogni immagine nominata giusta).
    .background-picture-two {
    background-repeat: no-repeat;
    background-attachment: fixed;

    Tuttavia quando apro il sito su mobile è un disastro totale… L’immagine di background non è per niente responsive. Sapresti come aiutarmi?

    Ho creato una pagina dedicata.. https://www.villavitalibellagio.com/it/silvia/

    Grazie!

    Rispondi

    1. Ciao Silvia!

      In realtà hai fatto tutto bene, ma da mobile la proprietà background-size: cover; consente di riempire perfettamente, ed in modo responsive, l’intera area di un div.

      Detto questo hai 2 possibilità per risolvere:
      – La prima è usare background-size: contain; (ma te lo sconsiglio per via delle altezze che hai impostato)
      – la seconda (forse la migliore) è quella di usare background-size: 150%; in modo da poter migliorare la visibilità di una foto, anche se di contro ha il fatto che non puoi decidere tu cosa venga visto dell’immagine e un problema con le parti superiori ed inferiori del div contenitore.

      Ho visto che hai usato nel tuo tema, per quel contenitore, una height con valore vh e qui entriamo in un discorso molto parametrico. Dovresti a mio avviso giocare meglio con le altezze, oppure altra soluzione è mostrare immagini orizzontali sui desktop, mentre cambiare la proprietà background-image con un valore, immagine, diversa e verticale su dispositivi mobili.

  40. Wow grazie mille per la risposta super veloce! 🙂

    Tuttavia… Sto ancora muovendo i primi passi quindi… Se hai voglia di rispondermi ancora avrei delle domande su come proseguire qui:

    Dove inserisco questo dato?
    – la seconda (forse la migliore) è quella di usare background-size: 150%; in modo da poter migliorare la visibilità di una foto, anche se di contro ha il fatto che non puoi decidere tu cosa venga visto dell’immagine e un problema con le parti superiori ed inferiori del div contenitore.

    Dove trovo un tuo bellissimo tutorial su questo: “Dovresti a mio avviso giocare meglio con le altezze, oppure altra soluzione è mostrare immagini orizzontali sui desktop, mentre cambiare la proprietà background-image con un valore, immagine, diversa e verticale su dispositivi mobili.”

    Scusa e… Grazie mille per il tuo aiuto!

    Rispondi

  41. Ciaoooo miniMAC!!!!, davvero un’ottimo lavoro, me la cavo abbastanza in html e css, però non riesco proprio a capire come rendere questo cavolo di background responsive al variare della dimensione del browser. Diversamente dal codice che hai proposto, ho eliminato l’opzione “position: fixed” perché non ne avevo bisogno, e il problema che mi sorge è il seguente, anche avendogli impostato “width:100%” e “background-size:cover” continua a fare come gli pare rimanendo più grande del solito e ovviamene questo non mi permette di rendere responsive i diversi paragrafi suddivisi nella pagina con i diversi “@media”, ti linko qui la pagina che ho creato di prova per mostrarti come viene visualizzata la pagina a pieno schermo ma appena la si restringe, tutto va come gli pare, questa è la pagina:

    https://www.metaforme.it/hypelinkscopy.php

    Invece qui ti allego quello che ho fatto momentaneamente:

    https://github.com/Lelitos333/Pagina-di-prova.git

    Ti prego aiutami potrei davvero perderci il capo…….

    Rispondi

    1. Devi mettere il background-cover al tuo body se non vuoi vedere lo spazio bianco sotto!

  42. ciao miniMAC.
    grazie per il tuo articolo, semplice e chiaro!
    ho seguito le tue indicazioni e sono riuscito in pochi secondi a mettere un’immagine come sfondo a tutta pagina.
    ma ora sto cercando di rendere lo sfondo cliccabile e non riesco.
    ho visto che avevi scritto: semplice… al post del DIV devi usare un tag link ovvero un “a”.
    puoi spiegarmi meglio?

    Rispondi

  43. grazie per la risposta rapida.
    ok ma dove lo metto il tag A con href?
    di solito lo inserisco su una parola/immagine/oggetto ma in questo caso l’immagine dello sfondo è nel css e il div è nel body.
    in che punto metto il tag A con href?

    Rispondi

  44. Ciao volevo chiederti, dato che sto imparando non riesco a visualizzare il video come sfondo . Praticamente si vede solo la parte bassa.
    Se ci metto una foto si vede bene , cosa potrebbe essere?🥲😅

    Rispondi

  45. ciao io ho ottenuto l’immagine di background full size ma nella parte responsive l’immagine si taglia, come posso fare?

    Rispondi

    1. Dovrei vedere bene il tuo codice per poterti assistere sul tuo problema. Usa un servizioper condividere il codice

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *