Approfondimenti: lo sfondo con i CSS

17 marzo 2006

Tutti gli attributi del tag <body> che abbiamo visto finora (da eccezione dell’attributo lang) servono a modificare caratteristiche che riguardano il layout della nostra pagina HTML. Come si può vedere, con un markup di questo genere:

<body leftmargin="0" topmargin="0"
      background="imgs/sfondo00006.gif"
      bgcolor="#66CCFF"
      lang="it">

Il nostro testo.

</body>

il layout e il contenuto sono mischiati tra loro. Gli attributi background e bgcolor sono addirittura deprecati nelle specifiche del W3C: significa che andranno perduti.

In un approccio di impaginazione che utilizzi i fogli di stile, l’aspetto che riguarda la visualizzazione deve essere separato dal contenuto.

Il nostro body si ridurrà quindi a qualcosa di minimale, come:

<body lang="it">

mentre le regole che indicano come visualizzare lo sfondo saranno visualizzate in una locazione separata del documento.

Le regole su come impostare lo sfondo con i CSS vengono spiegate dettagliatamente nella relativa lezione della guida ai CSS.

I fogli di stile sono estremamente potenti, e dando un’occhiata al link segnalato poco sopra si può leggere che è anche possibile fissare lo sfondo in modo che non si ripeta:

<body style="background-image: url(sfondo.gif);
             background-repeat: no-repeat;">

si tratta di una sintassi che funziona bene persino con Netscape 4.x, come si può vedere nella pagina di esempio.

Oppure è possibile “fissare lo sfondo” in modo da potervi fare scorrere sopra il contenuto della pagina. La sintassi è la seguente:

<body style="background-image: url(sfondo.gif);
             background-attachment:fixed;" >

come si può vedere anche nell’esempio.

Tutte le lezioni

1 ... 26 27 28 ... 58

Se vuoi aggiornamenti su Approfondimenti: lo sfondo con i CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Approfondimenti: lo sfondo con i CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy