🖼️ Cómo insertar imágenes en CSS

Insertar una imagen en CSS es muy sencillo. Simplemente hay utilizar la propiedad background-image. Ésta propiedad puede tener como valor la función url(), la misma que recibe como parámetro la ruta de la imagen. Esto lo veremos mejor con un ejemplo:

div {
  background-image: url("/img/logo.png");
}

Nota

La url no solamente debe hacer referencia a archivos locales. Puedes también poner la url de una imagen en línea. Un servicio en línea que te provee imágenes es unsplash.

Repetición de la imagen.

Por defecto, la imagen insertada se va a repetir las veces que sea necesario hasta llenar todo el espacio de nuestra página web, pero si no queremos que se repita, podemos indicar a CSS que no lo haga con la propiedad background-repeat y el valor no-repeat:

div {
  background-image: url("/img/logo.png");
  background-repeat: no-repeat;
}

Posición de la imagen.

También podemos modificar la posición de la imagen dentro de su contenedor con la propiedad background-position y alguno de los valores más usados son center, top, bottom, left, right. Como por ejemplo:

div {
  background-image: url("/img/logo.png");
  background-repeat: no-repeat;
  background-position: center;
}

Tamaño de la imagen.

El tamaño de la imagen se puede ajustar con la propiedad background-size y los valores permitidos son cover, contain, auto. Como por ejemplo:

div {
  background-image: url("/img/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

Explicación en video:

Para ver un ejemplo práctico de cómo se ven estas propiedades con sus diferentes valores te recomiendo ver el siguiente video: