Sfondi CSS: proprietà background pagine web

Vediamo nella prima parte del tutorial alcune delle proprietà che permettono di gestire gli sfondi con i CSS.

In questo tutorial analizzeremo le varie proprietà che ci permettono di gestire gli sfondi (background) con i CSS. In un precedente articolo avevamo parlato di come creare sfondi con immagini multiple: qui invece faremo un panoramica delle proprietà CSS in generale.

Background

La proprietà CSS “Background” è la funzione generale: permette di impostare tutte le proprietà di sfondo in un’unica dichiarazione. La proprietà “Background” è supportata da tutti i maggiori browser. Attraverso la semplice proprietà “Background” è possibile creare sfondi dotati di immagini singole o multiple.

div{ background:url(prova1.gif) top left no-repeat,url(prova2.gif) bottom left no-repeat,url(prova 3.gif) bottom right no-repeat;}

Nota bene: Internet Explorer 8 (e versioni inferiori) non supporta immagini multiple incorporate in un singolo elemento (come un div).

Background-attachment

Background-attachment permette di stabilire se un’immagine debba rimanere “fissa” o scorrere insieme alla pagina. È compatibile con tutti i browser più diffusi. La proprietà CSS background-attachment è dotata di 3 attributi supplementari: scroll, fixed e inherit.

body{ background-image:url(prova.gif');background-repeat:no-repeat;background-attachment:fixed;}

Nell’esempio in alto è stato indicato che l’immagine rimarrà fissa mentre la pagina scorre.

Background-color

La proprietà background-color permette di associare un colore di sfondo a un elemento desiderato. Background-color è supportata da tutti i maggiori browser.

body{background-color:yellow;}h1{background-color:#00ff00;}p{background-color:rgb(255,0,255);}

Background-image

La proprietà CSS background-image permette di settare l’immagine di sfondo di un elemento.

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

Nell’esempio in alto è stata applicata un’immagine di sfondo all’intera pagina web.

Background-position

La proprietà CSS background-position determina la posizione iniziale di un’immagine di sfondo. È supportata da tutti i browser di visualizzazione.

body{ background-image:url(prova.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center; }

Tale proprietà indica la posizione dei vari elementi attraverso vari attributi (valori):

left top // alto a sinistra
left center // centro a sinistra
left bottom // basso a sinistra
right top // alto a destra
right center // centro a destra
right bottom // basso a destra
center top //centro in alto
center center // centro assoluto
center bottom // centro in basso

Le coordinate di posizionamento possono essere espresse anche tramite percentuali (in varie misure):

50% 50% // centro assoluto
25% 75% // posizione medio-sinistra in basso

oppure in pixel:

10px 200px // posizione medio-sinistra in basso
50px 50px // posizione medio-sinistra in alto