La Propiedad BACKGROUND

Es una propiedad abreviada (shorthand property) que te permite establecer todos o algunos de los valores de las propiedades de fondo de un elemento en una sola declaración.

La propiedad background en CSS es una propiedad abreviada (shorthand property) que te permite establecer todos o algunos de los valores de las propiedades de fondo de un elemento en una sola declaración. Es una forma concisa y eficiente de controlar la apariencia del fondo de tus elementos HTML.

Sintaxis Básica

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

CSS
 
selector {
  background: [ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> [ / <background-size> ]? || <background-origin> || <background-clip> ];
}

Aunque la sintaxis puede parecer compleja, en la práctica es bastante intuitiva. Los valores se pueden especificar en cualquier orden, pero se recomienda seguir un orden lógico para mayor claridad.

Propiedades Individuales que Abarca background

La propiedad background puede establecer los valores de las siguientes propiedades individuales:

  • background-color: Establece el color de fondo del elemento.
  • background-image: Establece una o más imágenes de fondo para el elemento.
  • background-repeat: Controla cómo se repiten las imágenes de fondo.
  • background-attachment: Establece si la imagen de fondo se desplaza con el contenido o permanece fija.
  • background-position: Establece la posición inicial de cada imagen de fondo.
  • background-size: Especifica el tamaño de las imágenes de fondo.
  • background-origin: Especifica el origen (punto de referencia) para las propiedades background-position.
  • background-clip: Especifica hasta dónde se extiende el fondo dentro del elemento.

Orden de los Valores (Recomendado)

Aunque el orden no es estrictamente obligatorio, se recomienda seguir este orden para facilitar la lectura y el mantenimiento del código:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position / background-size (opcionalmente separados por /)
  6. background-origin
  7. background-clip

Ejemplos Prácticos

Veamos algunos ejemplos para entender cómo usar la propiedad background:

Ejemplo 1: Establecer un Color de Fondo

CSS
 
.elemento-color {
  background: lightblue;
}

Esto establece el color de fondo del elemento con la clase elemento-color a azul claro.

Ejemplo 2: Establecer una Imagen de Fondo sin Repetición

CSS
 
.elemento-imagen {
  background: url('imagen.jpg') no-repeat;
}

Esto establece la imagen imagen.jpg como fondo del elemento y evita que se repita.

Ejemplo 3: Establecer Color e Imagen de Fondo

CSS
 
.elemento-color-imagen {
  background: yellow url('patron.png');
}

Aquí, el color de fondo es amarillo y se utiliza la imagen patron.png como fondo (se repetirá por defecto).

Ejemplo 4: Controlar la Repetición y Posición de la Imagen

CSS
 
.elemento-repeat-posicion {
  background: url('textura.png') repeat-x top right;
}

Esto utiliza la imagen textura.png, la repite solo horizontalmente (repeat-x) y la posiciona en la esquina superior derecha del elemento.

Ejemplo 5: Establecer Color, Imagen, Repetición y Posición

CSS
 
.elemento-completo {
  background: #f0f0f0 url('icono.png') no-repeat center;
}

Este ejemplo establece un color de fondo gris claro (#f0f0f0), utiliza la imagen icono.png como fondo, evita su repetición y la centra en el elemento.

Ejemplo 6: Usando background-size

CSS
 
.elemento-tamano {
  background: url('imagen-grande.jpg') no-repeat center/contain;
  height: 300px; /* Necesario para ver el efecto */
}

Aquí, la imagen imagen-grande.jpg no se repite, se centra y se escala para que quepa completamente dentro del elemento (contain), manteniendo su relación de aspecto.

Ejemplo 7: Usando background-origin y background-clip

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento-origin-clip {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px dashed black;
    background: lightgreen url('patron-pequeno.png') repeat;
    margin-bottom: 20px;
  }

  .origin-padding {
    background-origin: padding-box; /* El origen del fondo es el borde interior del padding */
  }

  .origin-border {
    background-origin: border-box; /* El origen del fondo es el borde exterior del border */
  }

  .origin-content {
    background-origin: content-box; /* El origen del fondo es el borde exterior del contenido */
  }

  .clip-padding {
    background-clip: padding-box; /* El fondo se extiende hasta el borde exterior del padding */
  }

  .clip-border {
    background-clip: border-box; /* El fondo se extiende hasta el borde exterior del border */
  }

  .clip-content {
    background-clip: content-box; /* El fondo se extiende solo hasta el borde del contenido */
  }
</style>
</head>
<body>

  <div class="elemento-origin-clip origin-padding">background-origin: padding-box;</div>
  <div class="elemento-origin-clip origin-border">background-origin: border-box;</div>
  <div class="elemento-origin-clip origin-content">background-origin: content-box;</div>

  <div class="elemento-origin-clip clip-padding">background-clip: padding-box;</div>
  <div class="elemento-origin-clip clip-border">background-clip: border-box;</div>
  <div class="elemento-origin-clip clip-content">background-clip: content-box;</div>

</body>
</html>

Este ejemplo ilustra cómo las propiedades background-origin y background-clip afectan el área donde se dibuja el fondo.

Ejemplo 8: Usando background-attachment

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  body {
    height: 1500px; /* Para habilitar el scroll */
  }

  .elemento-scroll {
    width: 300px;
    height: 200px;
    background: url('montanas.jpg') no-repeat center;
    border: 1px solid black;
    margin-bottom: 20px;
    background-attachment: scroll; /* La imagen se desplaza con el contenido (por defecto) */
  }

  .elemento-fixed {
    width: 300px;
    height: 200px;
    background: url('espacio.jpg') no-repeat center;
    border: 1px solid black;
    background-attachment: fixed; /* La imagen permanece fija mientras se desplaza el contenido */
  }
</style>
</head>
<body>

  <div class="elemento-scroll">Este div tiene un fondo con background-attachment: scroll.</div>
  <div class="elemento-fixed">Este div tiene un fondo con background-attachment: fixed.</div>

  <p>Desplázate hacia abajo para ver la diferencia.</p>
  <p>(Se necesita contenido suficiente para habilitar el scroll)</p>

</body>
</html>

Aquí se muestra cómo background-attachment: fixed mantiene la imagen de fondo en su lugar mientras el resto del contenido se desplaza.

Valores Omitidos

Cuando utilizas la propiedad background, no es necesario especificar todos los valores. Los valores que no se proporcionen se establecerán en sus valores iniciales. Por ejemplo, si solo especificas background: blue;, todas las demás propiedades de fondo (como la imagen, la repetición, etc.) se establecerán en sus valores por defecto.

Especificidad

Es importante recordar que al usar la propiedad abreviada background, puedes sobrescribir valores individuales de las propiedades de fondo que hayas establecido previamente. Por lo tanto, si necesitas un control muy específico sobre una propiedad de fondo en particular, puede ser mejor establecerla individualmente después de usar la propiedad background.

Casos de Uso Comunes

  • Establecer un color de fondo simple para un contenedor.
  • Agregar una imagen de fondo a una sección o al cuerpo de la página.
  • Crear patrones de fondo que se repiten.
  • Implementar efectos de paralaje con background-attachment: fixed.
  • Controlar el tamaño y la posición de las imágenes de fondo para crear diseños visualmente atractivos.

Conclusión

La propiedad background es una herramienta poderosa y versátil en CSS que te permite controlar la apariencia visual de tus elementos de una manera eficiente. Al comprender cómo combinar sus diferentes valores, puedes crear fondos atractivos y personalizados para tus páginas web. ¡Experimenta con los diferentes valores y combinaciones para lograr el diseño que deseas!