Propiedad CSS background-color

La propiedad CSS background-color establece el color de fondo de un elemento. El color rellena el contenido, el relleno (padding) y los bordes del elemento, pero no el margen — los márgenes son siempre transparentes y muestran el fondo del elemento padre a través de ellos.

Esta página cubre la sintaxis de la propiedad, los formatos de color que puedes usar, las palabras clave especiales transparent e initial, cómo se anima el color entre estados y la regla de accesibilidad que mantiene el texto legible.

Cómo establecer un color de fondo

Puedes pasar cualquier valor de color CSS válido. Los formatos más comunes son:

Colores con nombre — red, tomato, rebeccapurple.
HEX — #ff0000 (o la forma abreviada de 3 dígitos #f00), con un par alfa opcional #ff000080.
rgb() / rgba() — rgb(255, 0, 0), rgba(255, 0, 0, 0.5) para transparencia parcial.
hsl() / hsla() — hsl(0, 100%, 50%), a menudo más fácil de ajustar manualmente que HEX.

Puedes elegir valores visualmente con nuestra herramienta Color Picker, o consultar la referencia completa de Colores HTML.

background-color es la parte más sencilla de la propiedad abreviada background; si solo necesitas un color sólido, establécelo por sí solo en lugar de escribir toda la forma abreviada.

Advertencia

Mantén siempre una relación de contraste suficientemente alta entre el color de fondo y el texto que se coloca sobre él. WCAG exige al menos 4.5:1 para texto normal (3:1 para texto grande) para que las personas con baja visión puedan leer la página. Usa un verificador de contraste al elegir combinaciones oscuro sobre claro o claro sobre oscuro.

Valor inicial	transparent
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredado	No.
Animable	Sí. El color del fondo es animable.
Versión	CSS1
Sintaxis DOM	object.style.backgroundColor = "#FFFFFF";

Sintaxis

Sintaxis de la propiedad CSS background-color

background-color: color | transparent | initial | inherit;

Ejemplo de la propiedad background-color:

Ejemplo de la propiedad CSS background-color

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: #8ebc42;
      }
    </style>
  </head>
  <body>
    <h2>Background-color Property Example</h2>
    <p>Here the background-color is specified with a hex value.</p>
  </body>
</html>

Pruébalo tú mismo »

![Propiedad CSS background-color](https://api.w3docs.com/uploads/media/default/0001/03/0e320aa63c591a91d882bbc24e53bcfcffa18142.png "CSS background-color property" =420x)

Uso de la transparencia

Cualquier formato de color con un canal alfa permite que el color aparezca semitransparente sobre lo que hay detrás del elemento:

background-color: rgba(255, 0, 0, 0.5);     /* semi-transparent red */
background-color: hsla(120, 100%, 50%, 0.5); /* semi-transparent green */
background-color: #0000ff80;                  /* semi-transparent blue (8-digit hex) */

El cuarto valor (alfa) va de 0 (completamente transparente) a 1 (completamente opaco). A diferencia de la propiedad opacity, un color de fondo con alfa solo afecta al fondo — el texto y los elementos hijos permanecen completamente opacos.

Ejemplo de la propiedad background-color con el valor "transparent":

Ejemplo de la propiedad CSS background-color con valor transparent

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Background-color Property Example</h2>
    <p>In this example the background-color is set to transparent. This is the default value.</p>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la versión animada de la propiedad background-color:

Ejemplo de la propiedad CSS background-color con animación

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: #eee;
        animation: mymove 5s infinite;
      }
      @keyframes mymove {
        30% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #eee;
        }
      }
    </style>
  </head>
  <body>
    <h2> Animation of background-color property</h2>
    <p>
      In this example it gradually changes the background color from grey to blue, and back to grey.
    </p>
  </body>
</html>

Pruébalo tú mismo »

Dado que background-color es animable, el navegador interpola suavemente entre los dos colores. Funciona de la misma manera con las transiciones CSS — por ejemplo, desvanecer el fondo de un botón en :hover.

Herencia

background-color no se hereda. Cada elemento comienza con transparent, por lo que un elemento hijo no copia el fondo de su padre — simplemente deja que el fondo del padre se muestre a través de él, a menos que le asignes el suyo propio. Por eso establecer un color en <body> parece "rellenar la página": los elementos hijos son transparentes y el color del body se muestra detrás de ellos.

Compatibilidad con navegadores

background-color ha formado parte de la especificación desde CSS1 y es compatible con todos los navegadores, incluidas todas las versiones de Internet Explorer. La notación HEX con alfa de 4 y 8 dígitos (#rrggbbaa) es la única incorporación más reciente y requiere un navegador razonablemente moderno; rgba() y hsla() son seguros en todas partes.

Valores

Valor	Descripción	Pruébalo
transparent	Este es el valor predeterminado y define el color de fondo como transparente. Significa que no hay color de fondo.	Pruébalo »
color	Define el color de fondo. Se pueden usar nombres de color, códigos de color hexadecimales, rgb(), rgba(), hsl(), hsla().	Pruébalo »
initial	Establece la propiedad en su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál es el propósito de usar la propiedad 'background-color' en CSS?

Cambiar el color de fondo de un elementoCambiar el color de fuente de un elementoAplicar una imagen de fondo a un elementoEliminar el color de fondo de un elementoCrear un color de fondo translúcido