Pubblicato il 19/07/09 - aggiornato il  | 18 commenti :

Come inserire uno sfondo (background) tipo texture o tipo immagine in un blog su Blogger.

In un articolo di qualche giorno fa ho segnalato splendide texture da inserire come sfondo nel blog però ho solo accennato a come farlo effettivamente. Adesso voglio completare l’informazione.

Ci sono essenzialmente due modi di creare uno sfondo, il primo è quello di inserire un motivo che si ripeta in modo geometrico per tutto il blog mentre il secondo è quello di inserire un’immagine completa.

Consideriamo la prima ipotesi e carichiamo l’immagine che può essere anche molto piccola su un servizio di hosting tipo Skydrive.

Andiamo su Layout > Modifica HTML e cerchiamo il seguente codice

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: $bodybgColor url() repeat top right;
/* background-attachment: fixed; */
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

Naturalmente a seconda dei modelli può essere diverso ma la zona in cui procedere è quella. Inseriamo la riga in rosso per farlo diventare così

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
  background-image:url(URL dell’immagine);
/* background-attachment: fixed; */
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

L’immagine utilizzata l’ho presa da qui ed ecco come si presenta il blog in questo caso

creare un blog su bloggr

con la parte esterna del modello riempita dall’immagine che abbiamo selezionato che si ripete per tutta la pagina. Se invece sostituiamo il codice con quest’altro

body {
  background:$bgcolor;
background-image:url(
http://is.gd/1DZGV);
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

in cui is.gd/1DZGV è l’indirizzo dell’immagine, viene una completa copertura del blog, ovviamente alcuni dati possono essere diversi, però ci deve essere per quanto riguarda il background solo la riga colorata di blu, mentre noi abbiamo aggiunto quella colorata di rosso

creare-blog-con-blogger

Come vedete l’immagine si ripete sia in senso orizzontale che in quello verticale. In questi casi bisogna selezionare un’immagine e un colore del testo per il blog che formino un contrasto adeguato altrimenti non si riesce a leggere.

Se volete trovare degli sfondi da utilizzare per questa feature andate nel sito CG Textures che offre un’ampia scelta di motivi da inserire come sottofondo del blog.

Passiamo adesso al caso in cui volessimo inserire non un motivo ma un’immagine completa. In questo caso la prima cosa da fare è caricarla su un hosting e acquisirne l’indirizzo.

E’ sempre preferibile scegliere un’immagine che sia contrastante con il colore del testo. Ho scelto per il test questa immagine a cui ho diminuito il contrasto e aumentato la luminosità

In questo caso il codice diventa così

body {
  background:$bgcolor;
background-image:url(
URL_immagine);
background-repeat:no-repeat;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

dove sono state aggiunte le due righe colorate in rosso. Ecco come si presenta in questo caso il blog

blog-sottofondo

Indubbiamente molto carino, ma se lo scorrete verso il basso, vi accorgerete che finita l’immagine la pagina riprende il suo consueto colore e questo non è molto bello esteticamente

sfondo-blog

Per ovviare a questo inconveniente possiamo far sì che l’immagine rimanga sempre in primo piano e non scorra con la pagina. Il codice diventerà allora

body {
   background:$bgcolor;
  background-image:url(
URL_immagine);
   background-repeat:no-repeat;
   background-position: center top;
   background-attachment: fixed;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

in cui le righe aggiunte in questo caso sono le quattro colorate di rosso. Le ultime due servono per tenere l’immagine sempre al centro in alto e per impedire che scorra con lo scorrimento della pagina.

In questo caso vedrete che scorreranno il testo e i widget ma l’immagine rimarrà comunque fissa. Se volete vedere l’effetto andate nel blog Come creare un blog con Blogger che ho usato come cavia.

Se avete un modello particolare ci possono essere anche personalizzazioni da fare sulla immagine di sottofondo. Ne elenco alcune

background-repeat:repeat-x;  per far ripetere l’immagine solo in senso orizzontale

background-repeat:repeat-y;  per far ripetere l’immagine solo in senso verticale

background-position:  30% 40%; per spostare l’immagine in una posizione indicata dalla percentuale colorata di rosso, e che può essere scelta a piacere, in senso orizzontale (30) ed in senso vericale (40)

background-position: center-top; è la posizione che ho inserito ma possiamo anche mettere al posto di center, left o right e al posto di top mettere bottom. Per esempio background-position: right-bottom; significa in basso a destra.

In ogni caso prima di provare queste modifiche scaricate un modello completo per fare un eventuale backup, oppure selezionate, copiate e salvate in un file di testo il codice che indica lo stile del body per poi eventualmente ripristinarlo.



18 commenti :

  1. Ciao io uso picasa perchè vorrei usare come sfondo una mia foto ma non riesco a capire l'indirizzo che devo mettere alla foto in questione e non so se posso farlo con picasa mi sai aiutare grazie

    RispondiElimina
  2. @Fabio
    Per prima cosa accedi a Picasa, poi clicca sull'album da cui vuoi ricavare l'immagine. Clicca sull'immagine prescelta con il destro del mouse e scegli "Copia indirizzo immagine" o "Copia URL immagine" dipende dall'OS che hai. Successivamente potrai incollare questo URL nel blocco di codice dell'articolo. Spero di essermi spiegato. Ciao

    RispondiElimina
  3. Ciao Ernesto, io vorrei utilizzare un'unica immagine come sfondo del blog, che non si ripeta geometricamente, perciò dovrei qui considerare il secondo suggerimento che hai dato, ma a differenza di ciò che è qui proposto, vorrei non coprire l'intero blog con l'immagine ma usarla come sfondo, senza che però questa si ripeta geometricamente. Quale codice dovrei usare? spero di aver reso l'idea!Grazie mille!! Come sempre sei estremamente gentile!!

    RispondiElimina
  4. @Il Crochet Itinerante
    Puoi usare il secondo codice. Se vuoi che non copra tutto il blog puoi usare una immagine più piccola del layout. Se la vuoi centrare nel layout puoi aggiungere questa riga
    background-position: center top;
    in cui viene vista nella parte alta e centrale. Puoi naturalmente usare anche gli attributi bottom, right e left con ovvio significato.
    Ciao

    RispondiElimina
  5. scusa sono disperato come cambio lo sfondo a questo blog????????????:
    http://my-coloryourlife.blogspot.com/

    RispondiElimina
  6. @Manager
    Disperato? ma dai ...
    Devi togliere queste immagini e metterne altre al loro posto
    http://www.opendrive.com/files/6964791_XyNqg/header.jpg
    http://www.opendrive.com/files/6964790_2IFXV/bullet.jpg

    RispondiElimina
  7. grazie per la dritta, scusami, un ultimana domanda come posso accavallare un video youtube su un immagine, in tal modo che l'immagine sempri la cornice del video?

    RispondiElimina
  8. @Manager
    Si può fare ma è complesso, non lo posso spiegare in un commento. Bisogna mettere l'immagine come background esattamente nel punto in cui visualizzare il video. I codice potrebbe essere simile a questo:
    <div style="background:url(Indirizzo immagine); width:600; height:400;">
    Codice preso da youtube
    </div>

    RispondiElimina
  9. l'ho trovato anche io quel post di yahoo lo ho provato ma non funziona.

    RispondiElimina
  10. ciao Ernesto, grazie al tuo post ho cambiato immagine di sfondo nel mio blog : http://www.generazioneditalenti.com/ . Come potrai vedere però scorrendo la pagina riprende il suo consueto colore. Ho utilizzato come da te consigliato il codice:

    background-image:url(URL_immagine);
    background-repeat:no-repeat;
    background-position: center top;
    background-attachment: fixed;

    ma a questo punto a scomparire a discapito dello sfondo è anche la parte alta del blog (quella grigia aldilà della linea arancione per intenderci) provocando un antiestetico effetto. Come faccio ad ovviare al problema?

    RispondiElimina
    Risposte
    1. @ TanzilloMassimo
      Significa che l'immagine è troppo piccola per lo sfondo. Puoi optare per una con dimensioni superiori a 2400x 1800 pixel oppure togliere la riga
      background-repeat:no-repeat;
      in questo modo l'immagine si ripeterà riempiendo gli spazi in cui non arriva

      Elimina
    2. fatto.....sempre lo stesso problema! in pratica ogni qualvolta che l'immagine si ripete o riempe gli spazi in cui non arriva va a coprire anche la parte in alto dove invece non dovrebbe...

      Elimina
    3. @ Salva il modello e prova a entrare su Modello > Personalizza > Sfondo e inserire lo sfondo da lì. Stai attento però perché potresti perdere alcune personalizzazioni quindi salvare il template è essenziale

      Elimina
    4. Grazie ma a questo punto stavo pensando ad una cosa più facile e meno rischiosa....c'è modo semplicemente di riempire lo sfondo (sempre solo la parte in basso a quella riga arancione) di un colore unico?

      Elimina
  11. @# Prova con Modello > Personalizza > Sfondo

    RispondiElimina
  12. Buongiorno ho una domanda come inserire uno sfondo (background) tipo texture o tipo immagine a un div box o a blog che si cambia in automatico ogni volta che sito si carica o si cambia la pagina di avere un background immagine diversa nuova ogni volta che guardo il sito le pagina.

    Come si può fare o di suggerire una idee dove andare trovare qualcosa di genere per implementarlo su blog.

    Grazie mille buona giornata.

    RispondiElimina
    Risposte
    1. Non ti so suggerire nulla in merito. E' la prima volta che mi capita una richiesta di questo genere e non me ne sono mai occupato :(
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy