# Sfondi HTML: come definire lo sfondo delle tue pagine web

È 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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml/) 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.

## 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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/attributi-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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/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:

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

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

```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>
```

Il risultato è il seguente:

[![Immagine: Sfondo HTML: colore di esempio](https://www.ionos.it/digitalguide/fileadmin/_processed_/f/3/csm_esempio-sfondo-colore-esempio-html_fd321e9fb9.webp "Sfondo HTML: colore di esempio")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/esempio-sfondo-colore-esempio-html.png) 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 &lt;h2&gt; e i passaggi di testo &lt;p&gt;:

```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>
```

[![Immagine: Esempio: tre sfondi HTML di colori diversi](https://www.ionos.it/digitalguide/fileadmin/_processed_/d/9/csm_sfondi-esempio-2-html_5098979ecd.webp "Esempio: tre sfondi HTML di colori diversi")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/sfondi-esempio-2-html.png) 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):

```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>
```

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.


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/sfondi-html/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/sfondi-html/) for AI/LLM consumption.