Vai ai contenuti

LAU



Home > Proprietà CSS2 > Proprietà per gli sfondi


Proprietà CSS2

Proprietà per gli sfondi

Tabella riassuntiva e descrittiva delle funzionalità, valori e supporto dei browser relativa alla specifiche dei CSS2 per la gestione degli sfondi.

  • NN: indica da quale versione di Netscape Navigator viene supportata la proprietà.
  • IE: indica da quale versione di Internet Explorer viene supportata la proprietà.
  • MF: indica da quale versione di Mozilla Firefox viene supportata la proprietà.
Proprietà Valori IE NN MF
background background-color
background-image
background-repeat
background-attachment
background-position
4.0 6.0 1.0
background-attachment scoll
fixed
4.0 6.0 1.0
background-color color-rgb
color-hex
color-name

transparent
4.0 4.0 1.0
background-image url
none
4.0 4.0 1.0
background-position top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
4.0 6.0 1.0
background-repeat repeat
repeat-x
repeat-y
no-repeat
4.0 4.0 1.0

Esempi dimostrativi delle funzionalità di alcune proprietà per gli sfondi:

torna alla lista completa delle proprietà

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).

torna alla tabella

background-attachment

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.

torna alla tabella

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;
}

torna alla tabella

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.

torna alla tabella

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.

torna alla tabella

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.

torna alla tabella

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]