Guida CSS interattiva: Colore di sfondo

Q: Come cambio il colore di sfondo in HTML?

Usa la proprietà CSS background-color. Per tutta la pagina: body { background-color: #f3f4f6; }. Per un solo elemento: .

Q: bgcolor è ancora valido in HTML?

No. L'attributo bgcolor su , e è obsoleto in HTML5. I browser lo disegnano ancora per le pagine vecchie, ma il modo corretto è background-color in CSS.

Q: Come rendo trasparente un colore di sfondo?

Usa un colore con canale alfa, come background-color: rgb(37 99 235 / 20%);. A differenza di opacity, così il testo all'interno resta pienamente visibile.

Q: Che differenza c'è tra background e background-color?

background-color imposta solo il colore. background è una forma abbreviata di tutte le proprietà dello sfondo (colore, immagine, posizione, dimensione, ripetizione, attachment, origin e clip), quindi background: red; riporta a none anche un'eventuale immagine di sfondo.

Q: Perché il colore di sfondo del body riempie tutta la finestra?

Quando l'elemento non ha uno sfondo proprio, il browser dipinge lo sfondo del body su tutta la tela, anche oltre il box del body. Dai uno sfondo a html se ti servono due colori diversi.

Come impostare un colore di sfondo

background-color riempie di colore il box di un elemento, compreso il padding e l'area sotto il bordo. Accetta qualsiasi colore CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background color</title>
  <style>
    body { font-family: system-ui, sans-serif; background-color: #f3f4f6; }
    .card { background-color: #ffffff; padding: 16px; border-radius: 8px; margin-bottom: 12px; }
    .notice { background-color: #fef3c7; padding: 12px 16px; }
    mark { background-color: #bbf7d0; }
  </style>
</head>
<body>
  <div class="card">A white card on a light gray page.</div>
  <div class="notice">An amber notice.</div>
  <p>A <mark>highlighted phrase</mark> inside a sentence.</p>
  <p><span style="background-color: #2563eb; color: white; padding: 2px 6px;">inline style</span></p>
</body>
</html>

Il colore della pagina è impostato su body, la scheda e l'avviso sui rispettivi div, e l'evidenziazione su un elemento inline. Gli elementi inline ricevono lo sfondo solo dietro il testo, riga per riga.

Colore di sfondo dell'intera pagina

Metti background-color su body. Se l'elemento <html> non ha uno sfondo proprio, il browser dipinge lo sfondo del body su tutta la finestra, anche dove finisce il contenuto del body:

body {
  background-color: #111827;
  color: #f9fafb; /* change the text color too, for contrast */
}

Il vecchio modo HTML era <body bgcolor="black">. L'attributo bgcolor è obsoleto su ogni elemento, quindi usa il CSS. I browser lo rispettano ancora per le pagine vecchie, ed è per questo che può sembrare funzionare.

Sfondi trasparenti

Ogni elemento parte con background-color: transparent, quindi dietro vedi il genitore. Per colorare un box lasciandolo trasparente, usa un colore con canale alfa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transparent background</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600; padding: 12px;
      background: repeating-linear-gradient(45deg, #bfdbfe 0 12px, #ffffff 12px 24px);
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .none { background-color: transparent; border: 2px dashed #111827; }
    .tint { background-color: rgb(245 158 11 / 50%); }
    .solid { background-color: rgb(245 158 11); }
  </style>
</head>
<body>
  <div class="box none">transparent (the default)</div>
  <div class="box tint" id="tint">rgb(245 158 11 / 50%)</div>
  <div class="box solid">rgb(245 158 11)</div>
</body>
</html>

Anche opacity: 0.5 lascerebbe vedere le strisce, ma sbiadisce pure il testo. Per uno sfondo trasparente con il testo pieno, usa un colore con alfa. La pagina sui colori elenca tutti i modi per scriverne uno.

Dove viene dipinto il colore

Per impostazione predefinita lo sfondo arriva fino al bordo esterno del border (quindi si vede attraverso un bordo tratteggiato o semitrasparente). background-clip cambia questo comportamento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>background-clip</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box {
      display: inline-block; margin: 6px; padding: 16px;
      border: 8px dashed #111827;
      background-color: #f59e0b;
    }
    .padding { background-clip: padding-box; }
    .content { background-clip: content-box; }
  </style>
</head>
<body>
  <div class="box">border-box</div>
  <div class="box padding">padding-box</div>
  <div class="box content">content-box</div>
</body>
</html>

Nel primo box l'ambra si vede tra i trattini. Nel secondo si ferma al bordo interno del border, e nel terzo è colorata solo l'area del contenuto. Il margin non viene mai dipinto: è sempre trasparente.

Righe di tabella a strisce

Uno sfondo su una riga sì e una no rende più facile leggere le tabelle larghe:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped rows</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 8px 12px; text-align: start; }
    thead { background-color: #1f2937; color: white; }
    tbody tr:nth-child(even) { background-color: #f3f4f6; }
    tbody tr:hover { background-color: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Name</th><th>Role</th></tr></thead>
    <tbody>
      <tr><td>Ada</td><td>Engineer</td></tr>
      <tr><td>Grace</td><td>Admiral</td></tr>
      <tr><td>Alan</td><td>Mathematician</td></tr>
      <tr><td>Katherine</td><td>Physicist</td></tr>
    </tbody>
  </table>
</body>
</html>

background-color contro la forma abbreviata background

background imposta tutte le proprietà dello sfondo in una volta. Ogni parte che ometti torna al suo valore predefinito, e questo coglie molti di sorpresa:

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background: #111827;          /* also resets background-image to none */
}

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background-color: #111827;    /* only the color; the gradient stays */
}

Usa background-color quando intendi solo il colore. Usa background quando imposti tutto lo sfondo in un unico punto, spesso un colore più un'immagine; vedi background-image.

Accessibilità: abbinalo al colore del testo

Un colore di sfondo è leggibile solo in relazione al colore del testo. Ogni volta che imposti l'uno, controlla l'altro: le WCAG chiedono un rapporto di contrasto di almeno 4.5:1 per il testo normale. Gli sfondi scuri richiedono un testo chiaro impostato in modo esplicito, perché il testo mantiene il colore scuro che eredita.

Errori comuni

Usare bgcolor. È obsoleto. Usa background-color.
Usare opacity per uno sfondo trasparente. Sbiadisce anche il contenuto. Usa un colore con alfa.
Una forma abbreviata background dopo un background-image. Azzera l'immagine. Scrivi invece background-color.
Aspettarsi che il margin mostri il colore. Il margin sta fuori dallo sfondo. Usa il padding per uno spazio colorato.
Uno sfondo scuro con il testo predefinito. Imposta anche un color chiaro.

Domande frequenti

Come cambio il colore di sfondo in HTML?

Usa la proprietà CSS background-color. Per tutta la pagina: body { background-color: #f3f4f6; }. Per un solo elemento: <div style="background-color: #fef3c7;">.

bgcolor è ancora valido in HTML?

No. L'attributo bgcolor su <body>, <table> e <td> è obsoleto in HTML5. I browser lo disegnano ancora per le pagine vecchie, ma il modo corretto è background-color in CSS.

Come rendo trasparente un colore di sfondo?

Usa un colore con canale alfa, come background-color: rgb(37 99 235 / 20%);. A differenza di opacity, così il testo all'interno resta pienamente visibile.

Che differenza c'è tra background e background-color?

background-color imposta solo il colore. background è una forma abbreviata di tutte le proprietà dello sfondo (colore, immagine, posizione, dimensione, ripetizione, attachment, origin e clip), quindi background: red; riporta a none anche un'eventuale immagine di sfondo.

Perché il colore di sfondo del body riempie tutta la finestra?

Quando l'elemento <html> non ha uno sfondo proprio, il browser dipinge lo sfondo del body su tutta la tela, anche oltre il box del body. Dai uno sfondo a html se ti servono due colori diversi.

Concetti correlati