È possibile definire gli sfondi HTML con valori di colore oppure con un file di immagine. Con lo sfondo giusto non soltanto migliori il layout del sito web, ma garantisci anche la leggibilità dei contenuti.

Cosa sono gli sfondi HTML?

Lo sfondo HTML (in inglese “background”) è la superficie dietro il contenuto di un sito web. Puoi definire questi sfondi al momento della creazione di una pagina in HTML e anche modificarli in un secondo momento. Per impostazione predefinita gli sfondi HTML sono completamente bianchi. È consigliabile modificarli non solo per migliorare il layout del sito web, ma anche per incrementare la leggibilità dei contenuti.

Il tuo web hosting come mai prima d'ora
  • Certificato SSL e protezione DDoS
  • Velocità, flessibilità e scalabilità
  • Dominio e consulente personale
  • 1 anno gratis del gestionale di fatturazione elettronica FlexTax

Cosa si può usare come sfondo HTML?

Sono previsti due metodi diversi per definire gli sfondi HTML:

  • con un valore di colore
  • da un’immagine o un gradiente di colore

I valori sono definiti attraverso l’attributo HTML style. Nei paragrafi seguenti ti mostriamo entrambe le possibilità.

Consiglio

In un altro articolo dedicato puoi scoprire di più sulle possibilità offerte dal tag style HTML.

Definire gli sfondi HTML con un valore di colore

Per modificare il colore degli sfondi HTML utilizza l’attributo style e le proprietà background-color o bgcolor. Per indicare il valore di colore hai a disposizione tre opzioni diverse:

  • Nome del colore: puoi definire il colore desiderato inserendo il nome in inglese. Oltre ai valori standard come red, yellow o green, puoi indicare anche colori speciali come lightblue o deepskyblue. Puoi usare indifferentemente lettere maiuscole o minuscole.
  • Codice di colore esadecimale: puoi indicare i colori anche utilizzando il relativo numero esadecimale a sei cifre. Questo numero è costituito da tre coppie di numeri da 0 a 9 e le lettere comprese tra a e f. La prima coppia indica il rosso, la seconda il verde e la terza il blu; la combinazione 00 è la più bassa e ff è il valore più alto. Il blu sarebbe quindi 0000ff.
  • Valore RGB: in alternativa usa il valore RGB, che è anche la base del codice di colore esadecimale. I valori sono compresi nello spettro da 0 a 255 e si riferiscono ai colori rosso, verde e blu. Il blu sarebbe quindi RGB (0, 0, 255).

La sintassi per definire il colore desiderato per gli sfondi HTML si presenta come segue:

<body style="background-color: valore;">
html

Nell’esempio che segue usiamo un codice di colore esadecimale per definire un blu chiaro come colore di sfondo:

<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio-sfondo</title>
</head>
<body>
<div style="background-color: #BFEFFF;">
<h1>Questo è il tuo titolo</h1>
<p>
Qui ci sono i contenuti del tuo sito web.
</p>
</div>
</body>
</html>
html

Il risultato è il seguente:

Immagine: Sfondo HTML: colore di esempio
Sfondo HTML di esempio in base al codice esadecimale “#BFEFFF”.

All’occorrenza puoi definire separatamente i colori per gli sfondi HTML anche per singole aree delle tue pagine web usando l’attributo style e la proprietà background-color. Puoi vedere il funzionamento nell’esempio che segue, in cui sono stati definiti colori diversi per lo sfondo generale e sfondi per i titoli <h2> e i passaggi di testo <p>:

<!DOCTYPE html>
<html lang="it">
<head>
<title>Sfondo esempio</title>
<style>
body {background-color: #BFEFFF;}
h2 {background-color: #1E90FF;}
p {background-color: #00CED1;}
</style>
</head>
<body>
<h2>Lo sfondo di questo titolo ha il valore di colore DodgerBlue.</h2>
<p>Questo sfondo ha il valore di colore DarkTurquoise.</p>
</body>
</html>
html
Immagine: Esempio: tre sfondi HTML di colori diversi
Esempio di sfondo HTML con tre colori diversi.

Definire immagini come sfondi HTML

Per poter usare come sfondi HTML immagini o grafici, è necessario salvarli nei formati di immagine JPG, PNG, SVG, WebP o GIF. Nell’esempio che segue vediamo il codice adatto per usare un’immagine come sfondo (il percorso dell’immagine deve essere adattato):

<!DOCTYPE html>
<html lang="it">
<head>
<title>Sfondo esempio</title>
<style>
	body { background-image: url('/utente/cartella/assets/sfondo/img/immagine.svg');	background-size: cover;}
</style>
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.8);">
<h1>Questo è il tuo titolo</h1>
<p>
Qui ci sono i contenuti del tuo sito web.
</p>
</div>
</body>
</html>
html

Se decidi di usare un’immagine, devi assicurarti che il contenuto resterà leggibile. Indicando altri parametri puoi adattare il posizionamento dell’immagine o del grafico in qualsiasi momento.

Dominio
Registra il tuo dominio
  • Certificato SSL Wildcard incluso
  • Registrazione di dominio sicura
  • Indirizzo e-mail professionale da 2 GB
Hai trovato questo articolo utile?
Vai al menu principale