¿Cómo se define un color de fondo por defecto?
Descubre cómo establecer un color de fondo por defecto para tu página web usando background-color en body o html, y como fallback para imágenes.
Si te refieres a cómo establecer un color de fondo base o «por defecto» para tu página web o para ciertos elementos, la forma más directa es utilizando la propiedad background-color en CSS.
1. Para toda la página web:
La práctica más común para definir un color de fondo por defecto para toda la página es aplicar la propiedad background-color al selector body o, a veces, al selector html (o a ambos). Esto establecerá el color de fondo base sobre el cual se renderizará el resto del contenido.
body {
background-color: #f4f7f6; /* Un gris muy claro como fondo de página */
color: #333; /* Es buena práctica definir también un color de texto por defecto que contraste */
font-family: Arial, sans-serif;
margin: 0; /* Eliminar márgenes por defecto del body */
padding: 0; /* Eliminar paddings por defecto del body */
}Lenguaje del código: PHP (php)Cualquier elemento que no tenga un background-color propio o cuyo background-color sea transparent (que es el valor inicial para la mayoría de los elementos) mostrará este color de fondo del body.
2. Como color de respaldo (fallback) para una background-image:
Es una excelente práctica definir siempre un background-color sólido cuando también estás utilizando una background-image. Este color de fondo:
- Se mostrará si la imagen no se puede cargar.
- Será visible mientras la imagen se está cargando.
- Rellenará áreas no cubiertas por la imagen de fondo si esta no ocupa todo el espacio del elemento (por ejemplo, si usas
background-size: containo si la imagen tiene transparencias).
.seccion-con-imagen {
background-image: url('imagenes/mi-textura.png');
background-color: #607d8b; /* Un azul grisáceo como color de respaldo */
background-repeat: no-repeat;
background-size: cover;
padding: 20px;
color: white; /* Texto claro para contraste con el fondo oscuro */
}Lenguaje del código: PHP (php)Valor por defecto del navegador:
Si no aplicas ningún estilo, la mayoría de los navegadores renderizan el fondo de la página (el del elemento <html> o <body>) como blanco, y la mayoría de los elementos HTML tienen un background-color inicial de transparent.
