¿Cómo establezco una imagen de fondo para un elemento con background-image en CSS?

1. Selecciona el elemento HTML al que quieres aplicarle la imagen de fondo (por ejemplo, body, un div, section, etc.) usando un selector CSS.
2. Dentro del bloque de declaración para ese selector, utiliza la propiedad background-image seguida de dos puntos (:) y luego la función url() con la ruta de tu imagen entre comillas simples o dobles.

Sintaxis básica:

selector {
  background-image: url('ruta/a/tu/imagen.jpg');
}Lenguaje del código: PHP (php)

Ejemplo práctico:

Supongamos que quieres poner una imagen de fondo a un div con la clase banner-bienvenida.

.banner-bienvenida {
  /* Ruta relativa al archivo CSS o una URL completa a una imagen en internet */
  background-image: url('../imagenes/textura-fondo.png');
  /* O, por ejemplo: background-image: url('https://picsum.photos/seed/picsum/1200/400'); */

  /* Es importante que el elemento tenga dimensiones (alto y ancho)
     o contenido que le dé dimensiones para que la imagen de fondo sea visible. */
  height: 300px;
  width: 100%;
  border: 1px solid #ccc; /* Solo para visualizar los límites del div */
}Lenguaje del código: PHP (php)

Consideraciones Adicionales:

Por defecto, si la imagen es más pequeña que el elemento, se repetirá para llenar todo el espacio. Para un mayor control sobre cómo se muestra la imagen de fondo, sueles combinar background-image con otras propiedades de fondo relacionadas:

• background-repeat: Controla si la imagen se repite y cómo (no-repeat, repeat-x, repeat-y, repeat).
  • Ejemplo: background-repeat: no-repeat;
• background-size: Ajusta el tamaño de la imagen de fondo (auto (por defecto), cover para que cubra toda el área, contain para que la imagen completa se ajuste dentro del área, o valores específicos como 100px 50px o porcentajes).
  • Ejemplo: background-size: cover;
• background-position: Define la posición inicial de la imagen de fondo dentro del elemento (center, top left, 50% 50%, o valores específicos).
  • Ejemplo: background-position: center center;
• background-attachment: Especifica si la imagen de fondo se desplaza con el contenido del elemento (scroll) o permanece fija respecto al viewport (fixed).
  • Ejemplo: background-attachment: fixed; (para un efecto parallax simple).