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: 14 / 08 / 2022

la propiedad css que se encarga de esto es background-color: 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 el background de toda la web directamente en el body del html

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.
*/
}

Cambiar el fondo de las etiquetas div y p de html

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 directamente en tu html usando estilos 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 poner comentarios en javascript

Imagen destacada del artículo Cómo poner comentarios en javascript

Cómo crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Cómo desinstalar paquetes npm

Imagen destacada del artículo Cómo desinstalar paquetes npm

Aprende a usar e insertar imágenes en html

Imagen destacada del artículo Aprende a usar e insertar imágenes en html

Cómo poner una imagen de fondo en html con css

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

Cómo crear un dropdown (menu desplegable) accesible con reactjs

Imagen destacada del artículo Cómo crear un dropdown (menu desplegable) accesible con reactjs

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

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