Proprietà per gli sfondi
|
Valori |
|
|
background-color |
|
|
scoll |
|
|
color-rgb |
|
|
url |
|
|
top left |
|
|
repeat |
Esempi dimostrativi delle funzionalità di alcune proprietà per gli sfondi:
· Esempio 1: la proprietà background-color
· Esempio 2: la proprietà background-image
· Esempio 3: box con immagine di sfondo
background
La proprietà background è una proprietà a sintassi abbreviata con cui si può definire sinteticamente e con una sola dichiarazione tutti i valori per lo sfondo.
body{
background: #fff url(img.jpg) 80px 10px
no-repeat fixed;
}
In questo esempio i valori della proprietà background applicano al tag body:
· sfondo bianco con immagine;
· posizionamento dell'immagine a 80 pixel da sinistra e 10 pixel dall'alto;
· immagine di sfondo non ripetuta;
· immagine di sfondo fissa (non scorrevole).
La
proprietà background-attachment serve
per stabilire se un'immagine posta come sfondo debba o meno scorrere assieme al
testo.
Questa proprietà ammette due soli valori: scroll e fixed.
Il valore scroll impone
all'immagine di scorrere assieme al testo , mentre il valore fixed fissa la
posizione dell'immagine indipendentemente dal testo.
body{
background-image: url(img.jpg);
background-attachment: scroll;
}
In questo esempio l'immagine scorre con il testo.
background-color
La
proprietà background-color serve
ad applicare il colore di sfondo.
La proprietà background-color può
assumere diversi valori:
· un nome (red, green, blue, etc.);
· un valore rgb (255,0,0);
· un valore esadecimale (#cc00cc);
· transparent (il colore dello sfondo è trasparente).
Se ad esempio vogliamo dare uno colore rosso allo sfondo possiamo utilizzare uno dei seguenti metodi :
body{
background-color: red;
}
oppure
body{
background-color: rgb(255,0,0);
}
oppure
body{
background-color: #ff0000;
}
background-image
La
proprietà background-image consente
di specificare un'immagine di sfondo.
La proprietà background-image accetta
2 valori:
· url (indica il percorso relativo all'immagine);
· none (imposta il valore predefinito, ovvero nessuna immagine).
body{
background-image: url(img.jpg);
}
In questo esempio viene applicato allo sfondo un'immagine.
background-position
La
proprietà background-position permette
di stabilire la posizione dell'immagine applicata come sfondo.
La proprietà background-position
richiede 2 valori:
· left o center o right (per la posizione verticale);
· top o center o bottom (per la posizione orizzontale).
body{
background-image: url(img.jpg);
background-position: top left;
}
In questo esempio l'immagine di sfondo si colloca in alto (posizione orizzontale) a partire da sinistra (posizione verticale).
Con i valori percentuali (%) e con le lunghezze (px o em) è possibile specificare la posizione in cui collocare l'immagine di sfondo.
body{
background-image: url(img.jpg);
background-position: 70px 2em;
}
In questo esempio l'immagine di sfondo viene collocata a 70 pixel dal bordo sinistro e a 2em dal bordo superiore.
background-repeat
La
proprietà background-repeat stabilisce
il modo in cui l'immagine di sfondo viene ripetuta.
La proprietà background-repeat può
assumere i seguenti valori:
· repeat (valore predefinito): l'immagine viene ripetuta orizzontalmente e verticalmente;
· repeat-x (l'immagine viene ripetuta solo orizzontalmente);
· repeat-y (l'immagine viene ripetuta solo verticalmente);
· no-repeat: (l'immagine non viene ripetuta e si avrà una sola occorrenza della stessa).
body{
background-image: url(img.jpg);
background-repeat: repeat-x
}
In questo esempio l'immagine viene ripetuta solo orizzontalmente.