Redazione
a- a+

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



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Staff
Ti interessano altri articoli su questo argomento?
Chiedi alla nostra Redazione!