Cómo poner color de fondo en html con css

Actualizado : 2023-10-27

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>

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi