Docs ejecutables de CSS: Color de fondo

Q: ¿Cómo cambio el color de fondo en HTML?

Usa la propiedad CSS background-color. Para toda la página: body { background-color: #f3f4f6; }. Para un elemento: .

Q: ¿bgcolor sigue siendo válido en HTML?

No. El atributo bgcolor en , y está obsoleto en HTML5. Los navegadores todavía lo dibujan en páginas antiguas, pero la forma correcta es background-color en CSS.

Q: ¿Cómo hago transparente un color de fondo?

Usa un color con canal alfa, como background-color: rgb(37 99 235 / 20%);. A diferencia de opacity, así el texto de dentro sigue totalmente visible.

Q: ¿Qué diferencia hay entre background y background-color?

background-color define solo el color. background es una abreviatura de todas las propiedades de fondo (color, imagen, posición, tamaño, repetición, attachment, origin y clip), así que background: red; también restablece cualquier imagen de fondo a none.

Q: ¿Por qué el color de fondo de body ocupa toda la ventana?

Cuando el elemento no tiene un fondo propio, el navegador pinta el fondo de body en todo el lienzo, incluso más allá de la caja de body. Dale un fondo a html si necesitas que los dos sean distintos.

Cómo definir un color de fondo

background-color rellena con un color la caja de un elemento, incluidos su padding y el área que queda debajo de su borde. Acepta cualquier color de 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>

El color de la página se define en body, la tarjeta y el aviso en sus div, y el resaltado en un elemento inline. Los elementos inline reciben fondo solo detrás de su texto, línea por línea.

Color de fondo de toda la página

Pon background-color en body. Si el elemento <html> no tiene un fondo propio, el navegador pinta el fondo de body en toda la ventana, incluso donde termina el contenido de body:

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

La forma antigua de HTML era <body bgcolor="black">. El atributo bgcolor está obsoleto en todos los elementos, así que usa CSS. Los navegadores todavía lo respetan en páginas antiguas, y por eso puede parecer que funciona.

Fondos transparentes

Todos los elementos empiezan con background-color: transparent, así que se ve el padre detrás. Para teñir una caja y seguir viendo a través de ella, usa un color con canal 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>

opacity: 0.5 también dejaría ver las rayas, pero desvanece el texto también. Para un fondo translúcido con texto sólido, usa un color con alfa. La página de colores enumera todas las formas de escribirlo.

Dónde se pinta el color

Por defecto el fondo llega hasta el borde exterior del borde (así que se ve a través de un borde discontinuo o semitransparente). background-clip cambia eso:

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

En la primera caja el ámbar se ve entre los guiones. En la segunda se detiene en el borde interior del borde, y en la tercera solo se colorea el área de contenido. El margin nunca se pinta: siempre es transparente.

Filas de tabla alternadas

Un fondo en una de cada dos filas hace que las tablas anchas se lean más fácil:

<!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 vs la abreviatura background

background define todas las propiedades de fondo a la vez. Cualquier parte que omitas vuelve a su valor por defecto, y eso sorprende a mucha gente:

.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 cuando solo quieres el color. Usa background cuando defines todo el fondo en un solo lugar, a menudo un color más una imagen; consulta background-image.

Accesibilidad: combínalo con el color del texto

Un color de fondo solo se lee bien junto a su color de texto. Cada vez que defines uno, revisa el otro: WCAG pide un contraste de al menos 4.5:1 para el texto del cuerpo. Los fondos oscuros necesitan un texto claro definido explícitamente, porque el texto conserva el color oscuro que hereda.

Errores comunes

Usar bgcolor. Está obsoleto. Usa background-color.
Usar opacity para un fondo translúcido. También desvanece el contenido. Usa un color con alfa.
Una abreviatura background después de un background-image. Restablece la imagen. Escribe background-color.
Esperar que el margin muestre el color. El margin está fuera del fondo. Usa padding para un espacio con color.
Un fondo oscuro con el texto por defecto. Define también un color claro.

Preguntas frecuentes

¿Cómo cambio el color de fondo en HTML?

Usa la propiedad CSS background-color. Para toda la página: body { background-color: #f3f4f6; }. Para un elemento: <div style="background-color: #fef3c7;">.

¿bgcolor sigue siendo válido en HTML?

No. El atributo bgcolor en <body>, <table> y <td> está obsoleto en HTML5. Los navegadores todavía lo dibujan en páginas antiguas, pero la forma correcta es background-color en CSS.

¿Cómo hago transparente un color de fondo?

Usa un color con canal alfa, como background-color: rgb(37 99 235 / 20%);. A diferencia de opacity, así el texto de dentro sigue totalmente visible.

¿Qué diferencia hay entre background y background-color?

background-color define solo el color. background es una abreviatura de todas las propiedades de fondo (color, imagen, posición, tamaño, repetición, attachment, origin y clip), así que background: red; también restablece cualquier imagen de fondo a none.

¿Por qué el color de fondo de body ocupa toda la ventana?

Cuando el elemento <html> no tiene un fondo propio, el navegador pinta el fondo de body en todo el lienzo, incluso más allá de la caja de body. Dale un fondo a html si necesitas que los dos sean distintos.

Conceptos relacionados