Propiedad background-color de CSS
La propiedad CSS background-color establece el color de fondo de un elemento. El fondo cubre las cajas de contenido, relleno y borde (pero no el margen).
Puedes elegir colores desde nuestra herramienta Selector de color. Los colores se pueden especificar como un nombre de color (p. ej., "red"), un valor HEX (p. ej., "#ff0000") o un valor RGB (p. ej., "rgb(255,0,0)").
Es importante asegurarse de que la relación de contraste entre el color de fondo y el color del texto colocado sobre él sea lo suficientemente alta, para que las personas con baja visión puedan leer el contenido de la página.
| 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 de 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>Ejemplo de la propiedad background-color</h2>
<p>Aquí el background-color se especifica con un valor hexadecimal.</p>
</body>
</html>
INFO
Puedes establecer valores hexadecimales, RGB, RGBA, HSL, HSLA o nombres de colores como valor para la propiedad background-color. Aprende más sobre Colores HTML.
background-color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
background-color: hsla(120, 100%, 50%, 0.5); /* semi-transparent green */Ejemplo de la propiedad background-color con el valor "transparent":
Ejemplo de la propiedad CSS background-color con valor transparente
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: transparent;
}
</style>
</head>
<body>
<h2>Ejemplo de la propiedad background-color</h2>
<p>En este ejemplo, el background-color se establece como transparente. Este es el valor predeterminado.</p>
</body>
</html>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> Animación de la propiedad background-color</h2>
<p>
En este ejemplo, cambia gradualmente el color de fondo de gris a azul, y de vuelta a gris.
</p>
</body>
</html>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 colores, 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?