Creare un paragrafo con immagine di sfondo con i css

L' applicazione presentata oggi prevede l' inserimento di una immagine quale sfondo del paragrafo; al di sopra di essa, potremo scrivere il nostro testo. Non serve tanto codice per poter ottenere quanto vogliamo. Inseriremo in un box contenitore dei tag <p> all' interno dei quali avremo un file grafico come background. Cominciamo a vedere il codice:

#content{
 margin:20px auto;
 padding:0;
 border:1px solid #8a9;
 width:598px;
 }  

Il contenitore possiamo realizzarlo a nostro piacimento; in questo caso esso avrà una dimensione pari a 600 pixel, bordi compresi. Questi avranno uno spessore di 1 pixel e di colore verde. Il margine dato al DIV (20px auto), serve per tenerlo al centro della pagina sia in Internet Explorer che in altri browser. Da sola questa dichiarazione non è sufficiente in quanto si deve dichiarare nel tag body del codice CSS, quanto segue:

body{
 margin:0;
 padding:0;
 text-align:center;
 } 

In questo modo qualsiasi elemento nella pagina avrà un posizionamento centrale. Adesso passiamo alla dichiarazione per il paragrafo <p>:

p {
 background: url(sfondo.gif) center no-repeat;
 margin: 1em 2em;
 font-size:13px;
 text-align:justify;
 } 

Analizzando il codice per il paragrafo notiamo che esso deve avere l' immagine, preparata precedentemente, come sfondo, posizionata al centro (sia in orizzontale che in verticale) e non deve essere ripetuta. I margini del paragrafo dai bordi del contenitore sono stati dati in misura più ampia e sono pari ad 1 em per top e bottom; di 2 em per il lato destro e sinitro. Con questo codice siamo in grado di rendere le nostre pagine web un pò più simpatiche e gradevoli. Il file di esempio ci mostra quello che abbiamo ottenuto.
Alla prossima.