Come aggiungo sfondo a tutto schermo?

DOMANDA:
Come faccio a mettere uno sfondo al mio blog su Blogger che venga visualizzato correttamente da tutti i browsers?”

Quesito interessante di una lettrice alle prese con il suo neo-blog! Grazie “Maria” per tutte le info che mi hai mandato in questo periodo, devo ancora aggiornare tutto, è un periodo un po’ così. Ma lo farò prestissimo. Quando vuoi e se vuoi (soprattutto) metterò il link al tuo blog. 😉
Ho trovato un sito in inglese (non so perché ma ci ragiono meglio e poi lo traduco in italiano.. Bho! Contorsionismi mentali non da poco.. eh eh!) con tutte le dritte per ottenere il risultato che vogliamo:

aggiungere uno sfondo che prenda tutto il body del nostro blog: l’effetto è forte, dà un senso di profondità. Quindi vedrete lo sfondo occupare tutto il vostro schermo del pc, senza distorsioni strane. Vediamo se ci riusciremo, se non viene bene come vorrei, postate nei commenti.

Sto parlando magari di una vostra immagine, di grandi dimensioni, che quindi potrebbe essere visualizzata in malo modo dai diversi browser.
Visto che non voglio aggiungere codice java e quant’altro, ho cercato solo codice css.

Si possono ottenere risultati diversi:

  • Un’immagine a sfondo che riempie l’intera pagina senza spazi.
  • Scalare l’immagine a seconda delle esigenze.
  • Centrare l’immagine.
  • Mantenere le proporzioni dell’immagine.
  • Aggiungere o non aggiungere barre di scorrimento.
  • Compatibilità con il maggior numero di browser.
La dimensione dell’immagine dovrebbe essere circa 1600 x 1100 px oppure 1280 x 960px,
 Consideriamo il codice che andrà bene per qualsiasi sito, ma in questa guida prenderò in considerazione la piattaforma Blogger. Ecco i passaggi ====>
Prima di ogni step > salva il tuo modello di template oppure crea un blog di prova tut di Blogghidee,  per fare tutti i tuoi esperimenti da scienziato pazzo! 😛
Step 1 – Prima di tutto occorre una immagine per lo sfondo, può andare bene una foto che dovete ridimensionare come superficie per ottenere le dimensioni ottimali per andare avanti nel nostro tut.
Step 2 – Ok,  andiamo insieme a vedere il codice Css, dal sito di Alistapart e da Paul Mason che ha ripreso da Alistapart ma ha aggiunto delle chicche che mi sono servite. Maria mi aveva anche segnalato Julius, che non ha bisogno di presentazioni! 😉
Nel primo link ci sono tutte i demo – anteprime del risultato finale, perciò vi suggerisco di dare un’occhiata per capire di cosa stiamo trattando.
Io ho preso il codice per centrare l’immagine, avere una barra di scorrimento, mantenere le proporzioni delle immagini. Naturalmente l’effetto è tale che la scrittura nei post sarà su sfondo bianco. L’effetto è bello, perché è un vedi, non vedi. Che mi piace molto.
Step 3 – Ho scelto un template che mi pareva più idoneo “Finestra Immagine” (ci arrivi da menu in alto DESIGN > DESIGNER MODELLI > Modelli) che ha già impostato lo sfondo con un’opacità bassa.
Step 4 – Ora clicca su MODELLO > MODIFICA HTML (nella versione vecchia di Blogger)
MODELLO > e scorri in basso (nella nuova interfaccia Blogger) troverai il box con il codice del template.
Ora cerca il tag “body” e sostituiscilo con questo codice ====>

body {
margin: 0;
padding: 0;
background: #000 url(AGGIUNGI QUI URL TUO SFONDO) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
color: #fff; }

#container { z-index: -999; min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; position: relative; width: 800px; min-height: 400px; margin: 100px auto; color: #333; }

#wrapper { width:600px; color:#fff; background-image:#fff; }

Ora senza salvare clicca su Anteprima per vedere il risultato! Che mi dici? E uscito l’effetto che volevamo, tipo questo… ===========>
Backgroun for all browser by Blogghidee

Mi piace un sacco questa cosa, nei prossimi giorni faremo insieme altre modifiche, seguendo i link credits.

Tipo immagine senza opacità e template skin ad hoc! Mi sto divertendo.
L’immagine è quella del secondo tut credits. Bello l’elefantone, mi piaceva.
Fammi sapere.. anzi fatemi sapere, che poi siete gelosi!!
😛

AGGIORNAMENTO ==> Ecco la guida per personalizzare lo sfondo a schermo intero, con tante chicche in più 🙂

A presto,
By BLOGGHIDEE  <=== ricordati di cliccare

Spread the love

Discussion

  1. Giulia
  2. Giulia
  3. Fabrizio Leoncini

Leave a Reply

This blog is kept spam free by WP-SpamFree.