Immagini di sfondo

Una sezione (… o l’intero corpo) del documento può essere arricchita con un colore di sfondo e/o con un’immagine di sfondo

Le proprietà disponibili sono

  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment

Utilizzando queste proprietà, con immagini appropriate, si possono ottenere effetti molto interessanti di decorazione della pagina.


background-color

Ci sono più possibilità per esprimere lo stesso colore 

  • aqua#00ffff, #0ff, rgb(0,255,255), rgb(0%,100%,100%) 
TD { background-color: ... }

background-image

L’immagine si specifica tramite l’URL corrispondente (senza virgolette o apostrofi…)

TD { background-image: url(...)}

L’immagine piastrellerà tutta la sezione interessata.


background-repeat

Con background-repeat si specifica se l’immagine di sfondo deve essere ripetuta e come

  • repeat, di default, l’immagine piastrella tutta la sezione
  • repeat-x, … solo orizzontalmente
  • repeat-y, … solo verticalmente
  • no-repeat, nessuna ripetizione

background-position

Se l’immagine di sfondo non copre tutta la sezione allora con background-position si specifica come deve essere allineata orizzontalmente e verticalmente 

  • top left, di default, in alto a sinistra
  • top center, in alto al centro
  • top rightin alto a destra
  • center left, al centro a sinistra
  • center
    center center
    , al centro al centro
  • center right, al centro a destra
  • bottom leftin basso a sinistra
  • bottom center, in basso al centro
  • bottom rightin basso a destra
  • ...% ...%, scostamenti in percentuale
  • ...px ...px, scostamenti in pixel

background-attachment

  • fixed
  • scroll