Image for Full Background image con CSS e quindi Responsive

Full Background image con CSS e quindi Responsive

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

<div id="tuodiv"></div>

e poi inserire come qui da esempio il codice CSS necessario

#tuodiv {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

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!

52 Commenti

  1. 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.

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

  3. 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

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

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

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

    Grazie in anticipo

    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!

  6. 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.

    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!

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

  8. 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

    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

  9. 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

    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. 🙂

  10. 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

  11. 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

    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.

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

    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

  13. 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

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

  15. 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

  16. 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.

    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!

  17. 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?

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

  19. 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…

  20. 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.

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

  22. 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? :/

  23. 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

Lascia un commento

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

Usando questo sito, accetti l’uso dei cookies.

Accetto