Definire lo sfondo e le proprietÓ in un documento

Cascade style sheets
di Risorse.net

Il successo grafico di un sito web, si identifica nel layout e nel background di tali pagine. Una prerogativa dei Css, e' infatti quella di poter predefinire il layout e lo sfondi di uno o piu' documenti Html.
Vediamo ora come definire tali proprieta' in una pagina web.

Background-color
Definisce un omogeneo colore di sfondo al documento. Questo comando, si puo' applicare anche a normale testo in modo da ottenere una evidenziatura di sfondo. Il codice da utilizzare e':
body { background-color: gray }


Background-image
Applica un'immagine di sfondo al documento. Anche in questo caso, e' possibile applicaere lo sfondo a un solo elemento.
body { background-image: url(http://nomeserver/nomeimg.gif) }


Background-repeat
Determina come l'immagine di sfondo deve essere riprodotta. I valori di questa proprieta' possono essere:
  • repeat Ripete l'immagine sia verticalmente che orizzontalmente.

  • repeat-y Ripete l'immagine verticalmente.

  • repeat-x Ripete l'immagine orizzontalmente.

  • no-repeat L'immagine non viene ripetuta.

    Il sorgente da utilizzare per ottenere questi effetti e':
    body { background-repeat: no-repeat }


    Background-position
    Determina la posizione dell'immagine stabilendo le distanze del margine sinistro e del margine superiore. I valori che puo' assumere sono:

  • left sinistra.

  • right destra.

  • top alto.

  • bottom basso.

  • center centro.

    Il codice e':
    body { background: url(http://nomeserver/nomeimg.gif) left bottom }


    Background-attachment
    Se specificata, l'immagine di sfondo non scorre insieme al documento. I valori sono:

  • scroll l'immagine scorre insieme al documento (di default).

  • fixed l'immagine non scorre insieme al documento.

    body { background-attachment: fixed }


    Background
    Per unire piu' proprieta' a un solo tag, si utilizza la dicitura background, per esempio:

    body { background:gray url(http://tuosito.it/nomeimg.gif) norepeat }

    © Risorse.net (www.risorse.net)
    pagina in versione stampabile:
    http://www.risorse.net /css/backgroundcss.asp?print=ok