Sfondo HTML

Un buon sfondo rende il sito particolarmente bello.

Esempio

Buona combinazione di colore di sfondo e colore del testo
Esempio di buona combinazione di colore di sfondo e colore del testo, rendendo facile leggere il testo nella pagina.
Cattiva combinazione di colore di sfondo e colore del testo
Esempio di cattiva combinazione di colore di sfondo e colore del testo, rendendo difficile leggere il testo nella pagina.

(Puoi trovare più esempi nella parte inferiore di questa pagina)

Sfondo (Backgrounds)

<body> Ha due etichette di configurazione dello sfondo. Lo sfondo può essere un colore o un'immagine.

Colore di sfondo (Bgcolor)

L'attributo di colore di sfondo imposta lo sfondo in un determinato colore. Il valore dell'attributo può essere un numero esadecimale, un valore RGB o un nome di colore.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Il codice sopra elencato imposta il colore di sfondo su nero.

Sfondo (Background)

Le proprietà di sfondo impostano lo sfondo su un'immagine. Il valore dell'attributo è l'URL dell'immagine. Se la dimensione dell'immagine è inferiore alla finestra del browser, l'immagine verrà ripetuta in tutta la finestra del browser.

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

L'URL può essere un indirizzo relativo, come nella prima riga di codice. Può anche essere un indirizzo assoluto, come nella seconda riga di codice.

Suggerimento:Se intendi utilizzare immagini di sfondo, tieni a mente i seguenti punti:

  • L'immagine di sfondo ha aumentato il tempo di caricamento della pagina? Suggerimento: i file di immagine non dovrebbero superare i 10k.
  • L'immagine di sfondo si abbina bene ad altri elementi visivi nella pagina?
  • L'immagine di sfondo si abbina bene al colore del testo nella pagina?
  • Come si presenta l'immagine tassellata nella pagina?
  • L'attenzione alla scrittura è stata distratta dall'immagine di sfondo?

Considerazioni di base - Consigli utili:

Le proprietà di colore di sfondo (bgcolor), sfondo (background) e testo (text) del tag <body> sono state abbandonate nei più recenti standard HTML (HTML4 e XHTML). W3C ha rimosso queste proprietà dalle loro raccomandazioni standard.

È consigliabile utilizzare i fogli di stile (CSS) per definire la disposizione e le proprietà di visualizzazione degli elementi HTML.

Più esempi

Immagine di sfondo con alta accessibilità
Esempi in cui l'immagine di sfondo e il colore del testo rendono facile leggere il testo della pagina.
Immagine di sfondo con alta accessibilità 2
Un altro esempio di immagine di sfondo e colore del testo che rendono facile leggere il testo della pagina.
Immagine di sfondo con scarsa accessibilità
Esempi in cui l'immagine di sfondo e il colore del testo rendono difficile leggere il testo della pagina.