Come scegliere lo sfondo del blog #3

{Read in English...}
come scegliere lo sfondo del blog 3
Buongiorno! Proseguiamo con le nostre lezioni sugli sfondi per il nostro blog.
Abbiamo già visto qualche cenno generale e qualcosa di più specifico su tinte unite e pattern, ma oggi mettiamo più carne al fuoco: scopriremo come impostare come sfondo un'immagine che copra l'intera finestra del browser, senza ripetersi e senza lasciare “buchi”.
Ecco un esempio:
come scegliere lo sfondo del blog 3
Purtroppo non ho ancora molta confidenza con Wordpress e per quanto riguarda l'interfaccia il mio discorso si rivolgerà agli utenti Blogger, ma il codice CSS che riporto ovviamente vale per qualsiasi piattaforma.

La premessa è che vi serve una buona immagine di partenza. Dev'essere sufficientemente leggera (cercate di non superare i 300 Kb), ma con una buona qualità (non deve risultare sgranata) e con delle corrette proporzioni (per evitare che prendendo le proporzioni della finestra del browser diventi “allungata” e deforme).
Blogger consiglia di utilizzare un'immagine 1800x1600 pixel, soddisfacente compromesso per soddisfare le risoluzioni dello schermo più comuni. Vi occorre, quindi, un'immagine con proporzioni larghezza/altezza di questo tipo, che potete ottenere abbastanza facilmente se avete un po' di confidenza con un qualsiasi programma di grafica.

A proposito, una regola generale per la gestione delle immagini digitali: mai, mai e poi mai allargare un'immagine piccola per portarla ad una dimensione più grande. Risulterebbe sfocata e “quadrettosa”, assolutamente sgradevole.

Solo e se disponiamo di un'immagine adatta e ottimizzata come sopra possiamo procedere, ma prima facciamo il backup del nostro modello!

Vi consiglio di aprire un nuovo blog di prova e iniziare da lì per vedere se il risultato vi soddisfa, così da non dover pasticciare sul vostro blog pubblico.
Per il mio esempio sono partita da uno dei modelli Travel di Blogger, che dispone già di uno sfondo semitrasparente per i contenuti, rendendo più d'impatto l'immagine senza sacrificare la leggibilità.

La prima cosa da fare è caricare sul web la vostra immagine di sfondo, in modo da ricavarne un link diretto. Potete farlo su siti come Photobucket, oppure caricarla su un post stesso del vostro blog, che però non pubblicherete e salverete come bozza (io ad esempio faccio sempre così).
L'importante è che ricaviate un link.

Ora dall'interfaccia di Blogger andate su Modello → Personalizza → Avanzato → Aggiungi CSS.
Copiate questo codice:
html, body {
background: url('sfondo.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Ora sostituite 'sfondo.jpg' col link alla vostra immagine (mantenendo le virgolette) e cliccate su “Applica al blog”.

Ta-daaaan, finito!
La vostra immagine si ridimensionerà a seconda della dimensione della finestra in cui è visualizzata, quindi risulterà sempre intera, senza ripetersi in maniera antiestetica.

Attenzione: chi naviga con browser obsoleti, come Internet Explorer versione 6 o 7, potrebbe non visualizzare correttamente il vostro background: essi, infatti, non supportano questo tipo di funzionalità CSS {fatevi un favore se li usate: passate a Chrome o Firefox!}.
Sta a voi scegliere se rischiare che qualche potenziale lettore che utilizza questi vecchi browser non veda il vostro sfondo.
Comunque, se utilizzate questo sistema e riscontrate problemi, vi prego di farmelo sapere...

Altre lezioni:
Con questo post partecipo al Linky Party by Topogina:
Linky Party 2013

21 commenti:

  1. Oh ma grazie, i codici sono sempre un bel problema. Chiara e precisa :)

    RispondiElimina
    Risposte
    1. Basta prenderli a piccole dosi, Simona. Grazie a te :)

      Elimina
  2. Wow un post utilissimo, ma io non posso che ringraziarti di cuore!! :)

    RispondiElimina
  3. Sempre utili i tuoi consigli!!!

    RispondiElimina
  4. spiegazioni chiare e precise
    Grazie x il tutorial
    baxi
    alice

    RispondiElimina
  5. Avanti con i tutorial e le spiegazioni....me li godo sempre! C'è sempre da imparare e migliorare...quindi GRAZIEEE!

    RispondiElimina
    Risposte
    1. Queste sono cose nuove anche per me perché per il mio blog preferisco uno sfondo bianco, ma non siamo tutti uguali e ne ho visti di blog gradevolissimi con sfondi di questo tipo... Quindi meglio imparare nel caso in cui qualcuno me lo chiedesse :D

      Elimina
  6. Grazie Tine, me lo segno e prima o poi...=)
    Ho prelevato il tuo banner e l'ho messo nella pagina Blog Amici.
    Daniela

    RispondiElimina
    Risposte
    1. Davvero?... Wow, grazie Daniela!!! La pagina coi banner dei blog amici è qualcosa che devo implementare anch'io insieme al prossimo restyling qui :)

      Elimina
  7. Veramente chiaro ed utile.
    Grazie
    Ciao
    Norma

    RispondiElimina
  8. Grazie dei preziosi insegnamenti :D!

    RispondiElimina
  9. Sei sempre molto chiara nelle spiegazioni, ti vedrei bene come insegnante! molto utile questo post^^ un bacio

    RispondiElimina
    Risposte
    1. Anche tu lo pensi? Brrr, che paura! Sarà la maledizione dei genitori e dei suoceri tutti e 4 insegnanti? XD
      Un abbraccio anche a te!

      Elimina
  10. Ciao Tine, sei bravissima, grazie!!
    Buona settimana
    Carmen

    RispondiElimina

Ti ringrazio per il tuo commento: mi stai dedicando due minuti del tuo tempo e lo apprezzo immensamente!
I commenti vengono modrerati, perciò non sono visibili appena inviati.
Mi riservo il diritto di cancellare messaggi:
• offensivi, diffamatori e/o volgari;
• a sfondo esplicitamente politico;
• pubblicitari;
• che richiedono 'follow 4 follow': seguimi se ti fa piacere, io farò altrettanto!

Related Posts Plugin for WordPress, Blogger...