Proprietà background nei CSS

Andrea Dottor — Wed, 23 Feb 2005 13:09:00 GMT

Ecco le principali proprietà per gestire lo sfondo da un foglio di stile CSS:

background-color

background-image

background-repeat

background-attachment

background-position

/* BACKGROUND-COLOR
Definisce il colore dello sfondo di un dato elemento */
body {background-color: white; }
body {background-color:#FFFFFF; }
body {background-color: rgb(0, 0, 0); }

/* BACKGROUND-IMAGE
Definisce il percorso dell'immagine da usare come sfondo di un elemento */
body {background-image: url(sfondo.gif); }
body {background-image: url(http:\\.....gif); }

/* BACKGROUND-REPEAT
Questa proprietà definisce la direzione in cui l'immagine di sfondo viene ripetuta */
selettore {background-repeat: <valore>; }

body {
background-image: url(sfondo.gif);
background-repeat: repeat;
}

div {
background-image: url(sfondo.gif);
background-repeat: repeat-x;
}

/*Valori:
  - repeat     L'immagine viene ripetuta in orizzontale e verticale. (comportamento standard. )
  - repeat-x   L'immagine viene ripetuta orizzontalmente.
- repeat-y    L'immagine viene ripetuta ;verticalmente.
- no-repeat   L'immagine non viene ripetuta.(viene ripetuta solo una volta)*/

/* BACKGROUND-ATTACHMENT
Con questa proprietà si decide se essa deve scorrere insieme al contenuto o se deve rimanere fissa.*/
selettore {background-attachment: <valore>; }

/*Valori
- scroll L'immagine scorre con il resto del documento quando si fa lo scrolling della pagina
- fixed L'immagine rimane fissa mentre il documento scorre */

/* BACKGROUND-POSITION
questa proprietà definisce il punto in cui verrà posizionata l'immagine di sfondo(la prima, nel caso venisse ripetuta)*/
selettore {background-position: <valore> o <valori>; }

body {
background-image: url(sfondo.gif);
background-repeat: no-repeat;
background-position: 50px 50px;
}

body {
background-image: url(sfondo.gif);
background-repeat: no-repeat;
background-position: center center;
}