Sfondo del testo
Ogni box può essere corredato di un proprio sfondo. Quanto diremo in questo paragrafo, in realtà, vale anche per l’intera pagina. Basterà definire queste regole per il tag <body>.
Cominciamo a vedere come definire un colore di sfondo uniforme. La proprietà da usare, come per il testo, è background-color:
<div style="background-color:blue">ciao</div>
Se invece preferite utilizzare un’immagine per il vostro sfondo, dovrete ricorrere alla proprietà background-image, come nell’esempio:
{background-image: url(Italia.gif);}
Notate che il nome e il percorso dell’immagine vanno passati tra le parentesi tonde della parola url. I tipi di immagine che si possono usare sono GIF, JPEG e PNG.
Quando si richiama una pagina da un CSS esterno, ricordate che l’URL utilizzato deve fare riferimento alla posizione del file CSS e non a quella della pagina XHTML da cui è richiamato.
Se non specificate diversamente, l’immagine viene ripetuta tante volte quanto è necessario per riempire tutto l’elemento per cui deve fare da sfondo. Per evitare la ripetizione o decidere il numero delle ripetizioni che desiderate, potete ricorrere alla proprietà background-repeat. I valori possibili sono:
- no-repeat: per evitare la ripetizione;
- repeat: l’immagine viene replicata in senso verticale e orizzontale, quanto necessario, per riempire l’elemento (è il valore di default);
- repeat-x: replica l’immagine solo in orizzontale;
- repeat-y: replica l’immagine solo in verticale.
Se scegliete di non ripetere l’immagine, e non specificate diversamente, l’immagine viene mostrata a partire dall’angolo superiore sinistro. La proprietà background-position permette di definire dove collocare l’immagine. Potete usate un valore numerico in percentuale o indicare la distanza assoluta dall’angolo superiore sinistro. Se preferite, per il posizionamento orizzontale potete ricorrere ai valori:
Per il posizionamento orizzontale, invece, potete usare i valori:
Se sono espresse due coordinate, la prima è orizzontale e la seconda verticale. Per finire, è anche possibile specificare se l’immagine dello sfondo deve essere fissa (e quindi, eventualmente, nascondersi in parte quando la pagina viene fatta scorrere) o se deve scorrere insieme alla pagina. La proprietà da usare è background-attachment e i valori possibili sono:
Anche per lo sfondo è possibile adottare la solita versione abbreviata. La proprietà background vi consente di definire univocamente i diversi attributi dello sfondo finora esaminati. L’ordine è il seguente: colore, url, ripetizione, fisso/mobile, posizione, come nell’esempio
<div style= "background: yellow url(sfondo.jpg) repeat-y fixed right bottom">
ciao
</div>
Nell’esempio che segue vi proponiamo uno sfondo non ripetuto e centrato per l’intera pagina visibile in figura 3:
<head>
<style type="text/css">
body {background-image: url(Italia.gif);
background-repeat: no-repeat;
background-position: center center;}
</style>
</head>
<body>
<p>Lorem ipsum … </p>
<p>Lorem ipsum … </p>
<p>Lorem ipsum … </p>
</body>
Figura 3: la pagina ha un’immagine di sfondo al centro non ripetuta
Proviamo ora a modificare uno degli esempi proposti, aggiungendo uno sfondo colorato con un’immagine, come visibile in figura 4:
<head>
<style type="text/css">
.primo { margin: 100px; padding: 20px;width: 50%; border: medium dashed #FF0000;
background-color:red;}
.secondo { width: 80%; border: 15px double;
background-image: url(riccio.gif);
background-repeat: repeat;}
</style>
</head>
<body>
<div class="primo"> Lorem ipsum … </div>
<div class="secondo">Lorem ipsum … </div>
</body>
Figura 4: il colore e un’immagine di sfondo
|
