Corsi on-line

Background: gestione dello sfondo coi CSS

  • CommentiScrivi un commento
  • ForumDiscuti sul forum
  • PrevBox Model: la proprietÓ border
  • NextDefinire un colore per il testo: la proprietÓ color

Con la scorsa lezione abbiamo esaurito la rassegna delle proprietÓ CSS tipiche del box-model. A partire da questa lezione passeremo in rassegna le altre proprietÓ dei fogli di stile partendo da quelle relative allo sfondo (o background), le quali possono essere applicate tanto alla pagina (tag <body>) quanto ad un suo elemento (ad esempio un box).

Attraverso tali proprietÓ possiamo applicare ad un elemento uno sfondo colorato oppure un'immagine da utilizzarsi singolarmente o ripetuta come se fosse una "piastrella" (cd. pattern). Ma andiamo per gradi e vediamo, prima di tutto, quali sono queste proprietÓ:

  • background - consente di impostare tutte le caratteristiche dello sfondo con una notazione "compressa" (vedremo in seguito cosa vuol dire);
  • background-color - imposta il colore sfondo;
  • background-image - imposta un'immagine di sfondo;
  • background-repeat - gestisce la ripetizione dell'immagine di sfondo sulla pagina;
  • background-position - imposta la posizione dell'immagine di sfondo;
  • background-attachment - serve per definire se l'immagine di sfondo deve restare fissa oppure "scrollare" col resto della pagina.

E' bene precisare che, come le proprietÓ del box-model, anche le proprietÓ relative allo sfondo non vengono ereditate ma riguardano, quindi, solo l'elemento cui sono applicate.

Lasciamo per ultima background e soffermiamo inizialmente la nostra attenzione sulle proprietÓ specifiche, analizzandole una ad una.

L'articolo continua dopo la pubblicità

background-color

Attraverso questa proprietÓ si assegna ad un dato elemento un colore di sfondo il quale pu˛ essere indicato attraverso la classica notazione esadecimale, come valore RGB o attraverso parole chiave come, ad esempio, red o black. Un altro valore che pu˛ essere assegnato a questa proprietÓ Ŕ transparent: cosý facendo il box sarÓ, appunto, trasparente e quindi, di fatto, lascerÓ vedere lo sfondo del suo elemento genitore.

Vediamo qualche esempio:

body
{
  background-color: #000000;
}
h1 {
  background-color: rgb(255,255,255); 
}
p {
  background-color: yellow;    
}

background-image

Questa proprietÓ Ŕ utilizzata per specificare la URL (relativa o assoluta) di un'immagine da utilizzare come sfondo. Il valore di default di questa proprietÓ Ŕ none (cioŔ "nessuna immagine di sfondo").

Vediamo qualche esempio:

body
{
  background-image: url('immagini/fiore.jpg');
}
body
{
  background-image: url('http://www.miosito.com/immagini/fiore.jpg'); 
}

L'uso degli apici tra le parentesi tonde pu˛ essere omesso salvo che la nostra URL non contenga uno spazio, nel qual caso sono necessarie.

Questa proprietÓ "condiziona" tutte le altre proprietÓ specifiche che vedremo di seguito.

Normalmente Ŕ consigliabile prevedere anche un colore di sfondo insieme all'immagine in quanto il colore andrÓ a riempire gli spazi eventualmente non coperti dall'immagine:

body
{
  background-color: #FFFF00;    
  background-image: url('immagini/fiore.jpg');
}

background-repeat

Questa proprietÓ Ŕ strettamente connessa alla precedente in quanto serve per definire se ed in che modo l'immagine specificata in background-image debba essere ripetuta. I valori ammessi per questa proprietÓ sono:

  • repeat - (valore di default) l'immagine dui sfondo viene ripetuta sia in orizzontale che verticale;
  • repeat-x - l'immagine viene ripetuta solo in senso orizzontale;
  • repeat-y - l'immagine viene ripetuta solo in senso verticale;
  • no-repeat - l'immagine non viene ripetuta (Ŕ consigliabile utilizzare questa opzione insieme ad immagini grandi a sufficienza per coprire l'area stilizzata).

Vediamo un esempio:

body
{
  background-color: #FFFF00;
  background-image: url('immagini/fiore.jpg');
  background-repeat: no-repeat;
}

background-attachment

Attraverso questa proprietÓ viene definito il comportamento dell'immagine in relazione allo scrolling di pagina: pi¨ precisamente Ŕ possibile specificare se lo sfondo debba "scrollare" insieme ai contenuti o se debba restare fisso. I due valori possibili per questa proprietÓ, infatti, sono "scroll" e "fixed".

Vediamo un esempio di immagine non ripetuta che non segue lo scroll:

body
{
  background-color: #FFFF00;
  background-image: url('immagini/fiore.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

background-position

Attraverso questa proprietÓ Ŕ possibile definire la posizione della nostra immagine di background. Pi¨ precisamente:

  • definisce la posizione esatta dell'immagine di sfondo non ripetuta;
  • definisce la posizione di partenza di un'immagine che viene ripetuta.

Nella pratica questa proprietÓ viene utilizzata quasi esclusivamente nel caso di immagini non ripetute.

Il suo valore pu˛ essere: una percentuale, un numero accompagnato da una unita di misura oppure una stringa (in quest'ultimo caso, il pi¨ frequente, si utilizzano le parole chiave "top", "left", "bottom" e "right").

Vediamo un esempio di immagine non ripetuta, che non segue lo scroll ed Ŕ centrata nello schermo:

body
{
  background-color: #FFFF00;
  background-image: url('immagini/fiore.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
}

Come potete vedere abbiamo utilizzato due volte la parola "center" per la nostra proprietÓ background-position in quanto il primo valore riguarda l'asse verticale ed il secondo quello orizzontale. Qualora venisse specificato un solo valore questo verrebbe applicato sia verticalmente che orizzontalmente.

La proprietÓ background

Come abbiamo giÓ visto per altre famiglie di proprietÓ CSS, anche quelle relative alla gestione dello sfondo possono essere sintetizzate all'interno di un unica proprietÓ: la proprietÓ background.

Questa proprietÓ pu˛ essere utilizzata per definire, in un colpo solo, tutte le caratteristiche del nostro sfondo. L'ultimo codice visto sopra, ad esempio, pu˛ essere convertito in:

body
{
  background: #FFFF00 url('immagini/fiore.jpg') no-repeat fixed center center;
}

Come potete vedere i valori delle varie proprietÓ viste sin'ora sono passati, separati da uno spazio, alla singola proprietÓ background. L'ordine dei valori non Ŕ viuncolante ma per una questione di pulizia Ŕ consigliabile rispettare questa gerarchia:

  • color
  • image
  • repeat
  • attachment
  • position

Ovviamente non Ŕ obbligatorio prevedere tutti e quattro i valori in quanto sarebbe perfettamente valida e funzionante anche una regola del genere:

body
{
  background: #FFFF00;
}

o una del genere:

body
{
  background: url('immagini/fiore.jpg');
}
Corsi
  • Corso CSS
    Corso CSS
    Web Design ed Accessibilità secondo il W3C con CSS ed XHTML. A partire da 29 €
  • Corso HTML
    Corso HTML
    Il linguaggio di marcatura per il Web. A partire da 29 €
  • Corso Webmaster Avanzato
    Corso Webmaster Avanzato
    Diventa un Webmaster professionista. A partire da 29 €
Vedi anche...
Altre Guide