Imagen destacada del artículo Cómo poner color de fondo en html con css

Cómo poner color de fondo en html con css

html svgcss svg
actualizado: 28 / 01 / 2023

la propiedad css que se encarga de esto es background-color seguido del código del color Puedes establecer el valor directamente en tu html o en tu hoja de estilos css.

Por ejemplo para cambiar el fondo (background) de un botón html puedes aplicar el siguiente código css.

html
<button>Soy un boton</button>
css
button {
background-color: #00ddaa;
/* Recuerda que los botones html traen un borde por defecto que se suele ver bastante mal,
puedes quitarlo en la siguiente linea */
border: none;
}

Aunque este ejemplo es funcional más adelante tienes diferentes ejemplos para modificar el color de fondo de tu contenido html, por otra parte si lo que te interesa es poner una imagen de fondo en html revisa este artículo.

Cambiar color de fondo html de toda la web

Por lo general si necesitamos que el color de fondo se aplique en todo el sitio debemos establecer la propiedad background-color en el body de nuestro html, por ejemplo para poner el fondo negro al body puedes usar el siguiente código:

css
body {
background-color: #21222c;
/* Este color no es negro completamente pero para un fondo oscuro en una web
es mejor uno de este tipo a un negro puro ya que es muy intenso.
*/
}

Como cambiar el color de fondo en html de las etiquetas div y p

Para este ejemplo añadiremos a una etiqueta div un fondo negro y una etiqueta p con fondo blanco y con el color del texto negro.

css
div {
background-color: hsl(240, 1%, 20%);
color: #efefef;
}
p {
background-color: hsl(240, 1%, 100%);
color: #000000;
}

Las reglas son las mismas para cualquier etiqueta recuerda siempre establecer un contraste accesible entre el fondo del elemento y su color de texto.

Agregar el color fondo usando css en línea

Aunque no se recomienda usar estilos en línea para agregar css a html algunas veces necesitaremos usarlos, para poner el color de fondo de un elemento html con inline-styles puedes usar el siguiente código:

html
<body style="background-color: rgba(41,41,41,0.5) ; color: #efefef ; ">
<p>Este es un body con fondo negro y texto blanco</p>
</body>
<div style="background-color: rgba(41,41,41,0.5) ; color: #efefef ; ">
Este es un div con fondo negro
</div>
Artículos relacionados:
Cómo insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

Cómo cambiar color de texto html con css

Imagen destacada del artículo Cómo cambiar color de texto html con css

Cómo crear un formulario de contacto con html

Imagen destacada del artículo Cómo crear un formulario de contacto con html

Cómo centrar un div con css

Imagen destacada del artículo Cómo centrar un div con css

Top 8 lenguajes backend más usados en la actualidad

Imagen destacada del artículo Top 8 lenguajes backend más usados en la actualidad

Calcular cuantos días hay entre dos fechas con javascript

Imagen destacada del artículo Calcular cuantos días hay entre dos fechas con javascript

Headless cms (cms sin cabeza) que es y porque deberías usarlo

Imagen destacada del artículo Headless cms (cms sin cabeza) que es y porque deberías usarlo

Cómo centrar una tabla html con css

Imagen destacada del artículo Cómo centrar una tabla html con css