Presentazione La Sintassi In Linea Nella Pagina Nel Foglio esterno Le Classi I Selettori ID
La Grafica i Links Attrib. Testo Attrib. Colore Attrib. Sfondi Attrib. Posizione Parametri

Attributi Sfondi

Abbiamo detto che gli attributi devono essere inseriti all'interno di parentesi graffe { } e laddove in HTML verrebbe usato un "=" (uguale) viene invece usato ":" (due punti). Argomenti consecutivi sono separati da ";" (punto e virgola) invece che da "," (virgola). Inoltre molti argomenti sono divisi da - (trattini) anche se questi fanno parte integrante del nome stesso. Per i parametri associabili agli attributi fare riferimento alla pagina   Parametri 

background-color : valore;

  
P    {background-color: yellow}
DIV  {background-color: #33ccff}

Questo attributo definisce il colore di sfondo di uno style e puņ essere adoperato indipendentemente dal colore di sfondo del testo. Per i possibili parametri fare riferimento alla ormai nota tabellina.

P {background-color: yellow;}
DIV {background-color: #33ccff;}

background-image : url (immagine.gif);

  
P    {background-image: url(file:immagine.gif);}
DIV  {background-image: url(logo.gif);}

Se associato al tag body diventa lo sfondo di tutta la pagina

BODY  {background-image: url("logo.gif");}

Questo attributo definisce l'immagine di sfondo per un elemento e puņ essere adoperato indipendentemente dall'immagine e dal colore dello sfondo assegnato alla pagina.
P {background-image : url(file:sfondi/SF8.jpg);}
continuo a scrivere per meglio
rendere l'idea dello sfondo sotto.

DIV {background-image: url (sfondi/SF9.jpg);}
continuo a scrivere per meglio
rendere l'idea dello sfondo sotto.

background-repeat : repeat | repeat-x | repeat-y | no-repeat ;

  

Questo attributo serve per specificare come disporre le immagini di sfondo quando non si tratta di uno sfondo omogeneo che riempie tutta la pagina: repeat indica che l'immagine deve essere replicata in orizzontale e in verticale. repeat-x deve essere replicata soltanto in orizzontale. repeat-y deve essere replicata soltanto in verticale. Logicamente questo attributo deve essere adoperato in abbinamento a background-image. 

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


     {background-image: url(logo.gif);
      background-repeat: repeat-y ;}
 

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

     {background-image: url(logo.gif);
      background-repeat: no-repeat ;}

background-position : coordinate;  

Questo attributo definisce il punto da cui iniziare a posizionare l'immagine e deve essere associato ai due precedentemente illustrati. Si possono adoperare parole chiave per la posizione orizzontale: left, center o right e parole chiave per la posizione verticale: top, center o bottom. E' anche possibile esprimere valori percentuali, dove: 0% 0% indica l'angolo in alto a sinistra (default) e: 100% 100% indica l'angolo in basso a destra. Per maggior precisione si possono specificare anche coordinate espresse in mm, cm, inc. 

     {background-image: url(logo.gif);
      background-repeat: repeat-y ;
background-position: 50% 50%}
 

     {background-image: url(logo.gif);
      background-repeat: repeat-x ;
background-position: 5mm 5mm}

background-attachment : scroll | fixed ;

  

{background-image: url(logo.gif);
background-attachment: scroll;}

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

Questo attributo definisce se l'immagine usata deve scorrere sullo schermo insieme al testo (scroll) oppure restare fissa sullo sfondo (fixed) nel momento in cui si scorre la pagina.

background: parametri;

  
{background: red url(logo.gif) repeat-x fixed}

Questo attributo da solo serve per specificare diversi attributi all'interno dello stesso separandoli semplicemente da uno spazio.

 

Continua:    Attributi Posizione
 


RIZZI RENATO
renato@renatoweb.it