Le proprietà dello sfondo

Le proprietà dello sfondo possono essere applicate, tramite i css, a tutti gli elementi e non solo al body ed alle tabelle, come avveniva con l’uso del solo linguaggio Html.Le proprietà per la gestione delle immagini e dei colori di sfondo sono molteplici:

background-color

Tale proprietà serve per definire il colore di sfondo, possono venire usati tutti i colori, espressi con tutte le sintassi previste dal linguaggio Css (guarda il capitolo riferito ai colori), oppure, c’è anche la possibilità di usare la parola chiave “trasparent” che rende visualizzabile il colore dell’elemento sottostante. La sintassi è la seguente:

selettore{background-color:trasparent;}

background-image

Serve per definire l’Url (assoluto o relativo) dell’immagine che si desidera impostare come sfondo dell’elemento preso in considerazione, se in sostituzione dell’url dell’immagine viene usata la parola chiave “none“ si sta indicando al browser di non inserire alcuna immagine come sfondo dell’elemento.

selettore{background-image: url(percorso assoluto o relativo);}

selettore{background-image:none;}

background-repeat

Tale proprietà serve per definire la direzione o le direzioni in cui l’immagine di sfondo verrà ripetuta e può assumere quattro valori:

• no-repeat: L’imagine non verrà ripetuta.
• repeat: L’immagine verrà ripetuta in orizzontale ed in verticale.
• repeat-x: L’immagine verrà ripetuta solamente in orizzontale.
• repeat-y: L’immagine verrà ripetuta solo in verticale

Per fare in modo che un’immagine venga ripetuta solo in verticale ci basterà usare la sintassi:

selettore{background-color:#000;background-image: url(sfondo.jpg); background-repeat:repeat-y;}

background-attachment

Questa proprietà serve per decidere se l’immagine deve scorrere insieme al contenuto della pagina o se deve rimanere fissa, i valori ammessi sono solo due:

• scroll: l’immagine scorre con i contenuti quando si effettua lo scrolling
• fixed: l’immagine resta fissa

selettore{background-image:url(sfondo.gif); background-attachment:fixed;}

background-position

Questa proprietà serve a definire la posizione in cui verrà visualizzata l’immagine nel caso in cui l’immagine non sia ripetuta, oppure la posizione da cui inizierà la ripetizione dell’immagine. E’ applicabile solo ai blocchi e non è una proprietà ereditata. I valori ammessi sono molteplici, e possibile utilizzare le parole chiave:

• top: Immagine in alto.
• left: immagine a sinistra.
• right: Immagine a destra.
• bottom: Immagine in basso.
• center: Immagine al centro.

selettore{background-image:url(sfondo.gif); background-position:top center;}

Un’altra sintassi è quella di utilizzare valori espressi con le percentuali che assicurano una migliore affidabilità a risoluzioni diverse:

selettore{background-image:url(sfondo.gif); background-position:50% 30%;}

L’ultima sintassi prevista è quella dell’uso di valori espressi in unità di misura, nell’esempio successivo l’immagine verrà posizionata a 50 pixel dal bordo superiore e a 30 pixel da quello sinistro:

selettore{background-image:url(sfondo.gif); background-position:50px 30px;}

background

Con l’uso della proprietà background abbiamo la possibilità di definire tutte le proprietà dello sfondo con una sola dichiarazione.

selettore {background: <background-color> <background-image> <background-repeat> <background-attachment> <background-position>;}

L’ordine in cui vengono definiti i valori non ha importanza, ma è comunque consigliabile usare il più logico possibile per rendere il codice più leggibile e pulito:

selettore{ background: white url(sfondo.gif) repeat-x fixed top;}

Popularity: 3% [?]

Vuoi essere sempre aggiornato???  Iscriviti  ai feed o invia un  trackback