Effetto retinato con i CSS e immagini di sfondo

Posizioneremo l' immagine in alto a sinistra, e fissa, nella pagina; creeremo un box contenente del testo generico, e quando scorreremo la pagina, vedremo la retinatura sull' immagine posta in alto. Per ottenere tutto ciò ci avvarremo di due immagini ".gif" e di una pagina html. Cominciamo con il codice CSS:

<style type="text/css"> 
<!--  
body {
margin:0;
padding:0;
font-family: Lucida, georgia,serif; 
background:#fff url(fil.gif) 30px 30px no-repeat fixed;
}  

Con questa prima dichiarazione abbiamo settato le impostazioni generiche per il BODY, cioè:
margini interni ed esterni a zero; abbiamo stabilito il tipo di font, il colore di sfondo (background-color: #fff;), il percorso dell' immagine sulla quale vedere l' effetto "retinato" (url(fil.gif);). A tale immagine, inoltre, ho dato delle ulteriori proprietà; che deve essere posizionata a 30 pixel sia dal lato sinistro che dall'alto della finestra del browser (30px 30px;); in ultimo DEVE rimanere fissa (fixed).

Ora passiamo a vedere il codice del contenitore; esso avrà un bordo di 2 pixel e di colore celeste; margini sia esterni che interni abbondanti per avere un' alta leggibilità e non dare l' impressione che il testo non sia un "corpo unico":

#contenitore{
margin:40px 25px 10px 150px;
padding:1em 1em 1em 140px; 
border:2px solid #09d;
background:url(rete.gif);
font-size:90%;
line-height:1.5em; 
}  

Dei margini, padding e bordo ho descritto quanto è dichiarato nel codice; adesso passiamo a vedere lo sfondo da dare a tale box; sarà applicata anche in questo caso un' immagine con la caratteristica che deve essere trasparente e si deve ripetere per TUTTO il nostro #contenitore;
notare bene che, a differenza dell' altro codice, non ho dichiarato altre proprietà se non il semplice rigo di codice:

background:url(rete.gif);

Tutto il nostro box deve essere "riempito" dalla nostra immagine trasparente.
Infine una piccola "formattazione" al titolo <h1>:

#contenitore h1{
margin:0; 
padding-top:5px; 
color:#f60; 
} 
</style> 

Tutti i titoli contrassegnati con <h1> avranno le seguenti caratteristiche: un margine pari a zero; un padding superiore di 5 pixel (per avere la stessa posizione sia in IE 6.0, FireFox, e soprattutto Opera), ed un colore arancio.
Direi che questo è quanto ci serve per la nostra retinatura sull' immagine. Non resta che vedere il risultato finale.