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

Actualizado : 2023-10-27

Para añadir una imagen de fondo a un elemento de una página web, debes usar la propiedad background-image de css seguida de la ruta (url) de la imagen que deseamos utilizar.

html

<div class="div-imagen-fondo">
  <h3>texto que estará encima de la imagen</h3>
</div>

css

.div-imagen-fondo {
  background-image: url(/imagenes/imagen-de-fondo.png);
  /* Para este ejemplo usamos el archivo que está dentro de una carpeta imagenes 
  en nuestro proyecto */

  /* 
  Puedes modificar como se ve la imagen de fondo con las siguientes propiedades:
  */

  /*
  ###########################
  background-position:
  background-repeat:background-size:
  background-repeat:
  background-attachment:
  ###########################
  */

  /* A continuación explicamos cada como funciona cada propiedad. */
}

Propiedad background-image en css para insertar imagen de fondo

Solo con poner la imagen no es suficiente, ya que dependiendo del tamaño original de esta y las dimensiones que ocupe la etiqueta html que la contiene el fondo se mostrará de múltiples formas.

Por ejemplo si la imagen es más pequeña que su contenedor de forma predeterminada se repetirá hasta llenar el espacio que esté disponible. Por otro lado si la imagen es muy grande sobrepasará el tamaño de su contenedor generando una descomposición en tu diseño.

Propiedades para ajustar imagen de fondo css

CSS dispone de múltiples propiedades que complementan a background-image que nos permiten ajustar y personalizar el tamaño de la imagen de fondo en html.

background-position:

Gracias a esta propiedad podemos establecer la posición en la que se ubicará la imagen de fondo con respecto a su contenedor.

background-position: 0% 0%;

Este es el valor por defecto de esta propiedad y posiciona la imagen en la esquina superior izquierda del elemento, el primer valor pertenece al eje horizontal y el segundo en el eje vertical puedes mover la posición del elemento de fondo jugando con estos valores.

background-position: bottom right;

Con las palabras clave bottom, right, left, top puedes establecer la posición del fondo.

background-position: center center;

Con este valor la imagen de fondo se posicionará en el centro

background-repeat:

Gracias a esta propiedad podemos controlar como se repite la imagen de fondo, cabe recordar que si la imagen es más pequeña que el elemento que la contiene, por defecto se repetirá tanto vertical como horizontalmente hasta llenar todo el espacio.

background-repeat: repeat;

Valor predefinido: la imagen de fondo se repetirá hasta ocupar todo el elemento html.

background-repeat: repeat-x;

Solo se repetirá horizontalmente.

background-repeat: repeat-y;

Solo se repetirá verticalmente.

background-repeat: no-repeat;

La imagen de fondo solo aparecerá una vez.

background-size:

Esta propiedad nos permite especificar el tamaño y espacio que ocupará la imagen de fondo dentro del elemento.

background-size: auto auto;

Este es el valor por defecto así que la imagen de fondo conserva su tamaño original, si la imagen es más grande que su contenedor esta se cortará y mostrará sólo una parte.

background-size: 220px 140px;

También puedes establecer el tamaño en píxeles, siendo el primero el tamaño horizontal y segundo el tamaño vertical

background-size: 80% 40%;

Combinando valores porcentuales puedes jugar y mostrar de fondo solo una parte específica de la imagen.

background-size: contain;

Este valor cambia el tamaño de la imagen de fondo para que se muestre completa.

background-size: cover;

Gracias a establecer el valor en cover nos aseguramos de que ocupe todo el espacio disponible dentro del elemento.

background-attachment:

Con esta propiedad podemos controlar el comportamiento de la imagen de fondo cuando el usuario realiza scroll en nuestra página.

background-attachment: scroll;

La imagen se desplazará con el resto de la página, este es el valor que traen por defecto.

background-attachment: fixed;

La imagen no se desplazará con la página y permanecerá fija en su contenedor y permanecerá posicionada según la ventana gráfica, así que es probable que solo sea visible una parte de esta.

Consejos a considerar para colocar imagen de fondo en tu web

Establecer por defecto un color de fondo parecido al de la imagen por si no se carga.
Asegúrate de que el texto que esté por encima de la imagen de fondo html tenga un buen contraste y se pueda leer claramente.
Salvo para casos muy específicos es mejor no poner una imagen de fondo a todo el documento html en la etiqueta body, por ejemplo es muy común usar esto en banners y puedes aplicar el fondo directamente sobre esa etiqueta sin tener que llenar toda la web.

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