29

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!

29

Grande Christian, sono Fabrizio di Skype. Ottimo articolo 🙂

Rispondi

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

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

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

semplice… al post del DIV devi usare un tag link ovvero un “a”

Rispondi

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

Rispondi

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

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

Grazie in anticipo

Rispondi

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

Ottima soluzione 🙂
Grazie mille!

Rispondi

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

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!

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

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

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

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

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

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

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

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

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.

Ciao di nuovo,
se vai al sito http://famarinu.com/mmagazine/prova3.html puoi vedere la mia prova, l’immagine di sfondo è di 1024 x768.
Ora se vedi il logo in alto è tagliato, io non lo vorrei tagliato, allora che cosa dovrei fare?
Grazie dell’aiuto!

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

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

Lascia un commento

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

Usando questo sito, accetti l’uso dei cookies.

Accetto