La Propiedad BACKGROUND-IMAGE

La propiedad background-image en CSS se utiliza para establecer una o más imágenes de fondo para un elemento HTML

La propiedad background-image en CSS se utiliza para establecer una o más imágenes de fondo para un elemento HTML. Esto te permite añadir elementos visuales atractivos a tus páginas web, como logotipos, patrones, texturas o fotografías.

Sintaxis Básica

La sintaxis básica para usar la propiedad background-image es la siguiente:

CSS
 
selector {
  background-image: valor;
}

Donde selector es el elemento HTML al que quieres aplicar la imagen de fondo y valor puede ser uno de los siguientes:

Valores de la Propiedad background-image

La propiedad background-image acepta varios valores para definir la imagen o imágenes de fondo:

1. none

Este es el valor predeterminado. Indica que no se debe mostrar ninguna imagen de fondo.

Ejemplo:

CSS
 
.sin-fondo {
  /* No se mostrará ninguna imagen de fondo */
}

2. url('ruta-a-la-imagen')

Este valor especifica la ruta (URL) de la imagen que se utilizará como fondo. La ruta puede ser relativa o absoluta. Se admiten varios formatos de imagen como JPG, PNG, GIF, SVG, etc.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .con-fondo-imagen {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('imagen-de-fondo.jpg'); /* Reemplaza 'imagen-de-fondo.jpg' con la ruta real de tu imagen */
  }
</style>
</head>
<body>

  <div class="con-fondo-imagen">Este div tiene una imagen de fondo.</div>

</body>
</html>

Asegúrate de que la ruta a tu imagen sea correcta para que el navegador pueda encontrarla y mostrarla.

3. linear-gradient(dirección, color-stop1, color-stop2, ...)

Este valor crea un degradado lineal como imagen de fondo. Puedes especificar la dirección del degradado (opcional) y una lista de puntos de color (color stops) que definen la transición de colores.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .degradado-lineal {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: linear-gradient(to right, red, yellow); /* Degradado de rojo a amarillo, de izquierda a derecha */
  }
</style>
</head>
<body>

  <div class="degradado-lineal">Este div tiene un degradado lineal como fondo.</div>

</body>
</html>

Puedes especificar diferentes direcciones (como to top, to bottom, to left, to top right, etc.) y múltiples puntos de color con sus respectivas posiciones (opcional).

4. radial-gradient([forma tamaño]? [en posición]?, color-stop1, color-stop2, ...)

Este valor crea un degradado radial como imagen de fondo. El degradado irradia desde un punto central. Puedes especificar la forma (elipse o círculo), el tamaño (closest-side, farthest-side, closest-corner, farthest-corner) y la posición del centro del degradado (opcional).

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .degradado-radial {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: radial-gradient(circle, yellow, green); /* Degradado radial circular de amarillo a verde, centrado por defecto */
  }
</style>
</head>
<body>

  <div class="degradado-radial">Este div tiene un degradado radial como fondo.</div>

</body>
</html>

Al igual que con los degradados lineales, puedes personalizar la forma, el tamaño, la posición y los puntos de color.

5. repeating-linear-gradient(dirección, color-stop1, color-stop2, ...)

Similar a linear-gradient(), pero crea un degradado lineal que se repite para llenar el elemento.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .degradado-lineal-repetitivo {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: repeating-linear-gradient(45deg, blue, blue 10px, white 10px, white 20px); /* Rayas diagonales */
  }
</style>
</head>
<body>

  <div class="degradado-lineal-repetitivo">Este div tiene un degradado lineal repetitivo como fondo.</div>

</body>
</html>

6. repeating-radial-gradient([forma tamaño]? [en posición]?, color-stop1, color-stop2, ...)

Similar a radial-gradient(), pero crea un degradado radial que se repite para llenar el elemento.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .degradado-radial-repetitivo {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: repeating-radial-gradient(circle, red 0, red 10px, transparent 10px, transparent 20px); /* Círculos concéntricos */
  }
</style>
</head>
<body>

  <div class="degradado-radial-repetitivo">Este div tiene un degradado radial repetitivo como fondo.</div>

</body>
</html>

7. Múltiples Imágenes de Fondo

Puedes especificar múltiples imágenes de fondo para un solo elemento separando los valores con comas. Las imágenes se apilan una encima de la otra, con la primera imagen especificada en la parte superior.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .multiples-fondos {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('patron1.png'), url('patron2.png');
    background-repeat: repeat, no-repeat;
    background-position: top left, bottom right;
  }
</style>
</head>
<body>

  <div class="multiples-fondos">Este div tiene múltiples imágenes de fondo.</div>

</body>
</html>

En este ejemplo, se utilizan dos imágenes de fondo. patron1.png se repetirá desde la esquina superior izquierda, y patron2.png no se repetirá y se posicionará en la esquina inferior derecha.

8. url() con image-set (para imágenes responsivas)

Aunque no es un valor directo de background-image, la función CSS image-set() se puede usar dentro de url() para proporcionar diferentes versiones de una imagen para diferentes densidades de píxeles.

Ejemplo:

CSS
 
.imagen-responsiva {
  background-image: url(image.png); /* Imagen por defecto */
  background-image: image-set(
    "image.png" 1x,
    "image-2x.png" 2x,
    "image-3x.png" 3x
  );
}

El navegador elegirá la imagen adecuada según la densidad de píxeles del dispositivo.

Interacción con Otras Propiedades de Fondo

La propiedad background-image trabaja en conjunto con otras propiedades de fondo para controlar cómo se muestra la imagen:

  • background-repeat: Define si y cómo se repite la imagen de fondo (por ejemplo, repeat, no-repeat, repeat-x, repeat-y).
  • background-position: Establece la posición inicial de la imagen de fondo dentro del elemento (por ejemplo, top left, center, bottom right, o valores en píxeles o porcentajes).
  • background-size: Especifica el tamaño de la imagen de fondo (por ejemplo, auto, cover, contain, o valores en píxeles o porcentajes).
  • background-attachment: Establece si la imagen de fondo se desplaza con el contenido o permanece fija (scroll, fixed, local).
  • background-origin: Especifica el origen del sistema de coordenadas para la propiedad background-position.
  • background-clip: Especifica hasta dónde se extiende el fondo dentro del elemento.
  • background-color: Establece un color de fondo que se mostrará si la imagen no está disponible o es transparente.

Casos de Uso Comunes

  • Logotipos e iconos: Mostrar la marca o iconos dentro de elementos.
  • Patrones y texturas: Crear fondos visualmente interesantes y repetitivos.
  • Fotografías e ilustraciones: Establecer imágenes de gran tamaño como fondo de secciones o de toda la página.
  • Efectos de degradado: Crear transiciones de color suaves y personalizadas.
  • Imágenes responsivas: Utilizar image-set() para servir diferentes versiones de imágenes según la resolución de la pantalla.

Consideraciones

  • Formato de imagen: Elige el formato de imagen adecuado según tus necesidades (JPEG para fotografías, PNG para imágenes con transparencia, SVG para gráficos vectoriales).
  • Optimización de imágenes: Asegúrate de optimizar tus imágenes para reducir el tamaño del archivo y mejorar el rendimiento de carga de la página.
  • Contraste: Si utilizas una imagen de fondo detrás del texto, asegúrate de que haya suficiente contraste entre el texto y la imagen para garantizar la legibilidad.
  • Fallback: Siempre es una buena práctica establecer un background-color como respaldo en caso de que la imagen de fondo no se cargue.

Conclusión

La propiedad background-image es una herramienta fundamental en CSS para enriquecer visualmente tus páginas web. Con la capacidad de utilizar imágenes, degradados y múltiples fondos, puedes crear diseños únicos y atractivos. ¡Experimenta con los diferentes valores y combínalos con otras propiedades de fondo para lograr el efecto deseado!