La propiedad background

La propiedad background-color

La primera propiedad de la familia background es background-color, que ya hemos mencionado anteriormente, y que en principio no tiene relación directa con las imágenes de fondo.

Sin embargo, es importante tener en cuenta que es posible darle un color de fondo y una imagen de fondo a un elemento simultáneamente, ya que si la imagen tiene transparencias o si el elemento HTML es más grande que la imagen de fondo, se vería el color de fondo del elemento. En otro caso, la imagen taparía el color de fondo.

Si quieres saber más sobre background-color echa un vistazo al post Colores en CSS.

La propiedad background-image

En el caso de querer utilizar imágenes de fondo, como ya hemos dicho, utilizaremos la propiedad background-image. Tenemos 4 opciones posibles:

• 1️⃣ No usar imagen de fondo: none. La opción por defecto.
• 2️⃣ Usar una imagen de fondo usando la función url() e indicando la imagen o su ruta.
• 3️⃣ Usar la función image-set() para indicar fallbacks (si no carga una, carga otra).
• 4️⃣ Usar un gradiente o degradado, es decir, un color (o colores) que se convierte en otro.

En resumen:

De image-set() y los gradientes, hablaremos más adelante.

La función url()

Podemos hacerlo de una de las siguientes formas:

• 1️⃣ url("imagen.jpg") buscará la imagen en el mismo lugar donde nos encontramos.
• 2️⃣ url("/assets/logo.svg") buscará la imagen en la ruta absoluta en el dominio actual.
• 3️⃣ url("../assets/logo.svg") buscará la imagen en assets/ dentro de la carpeta padre.
• 4️⃣ url("https://lenguajecss.com/logo.svg") buscará la imagen justo en esa ruta.

Si tienes dudas sobre las rutas, tienes un excelente artículo sobre ello en Enlaces o hipervínculos.

La propiedad background-repeat

La propiedad background-repeat especifica si la imagen se repetirá horizontalmente (repeat-x), si se repetirá verticalmente (repeat-y), si lo hará en ambas direcciones (repeat) o en ninguna (no-repeat). Por defecto, si no se indica nada, esta propiedad está ajustada en repeat.

Existen también dos valores interesantes, space y round, los cuales asumen implícitamente que se repite el fondo. En el caso de que tengamos una imagen de fondo que se repita varias veces en mosaico, space evita que se corte la imagen, introduciendo un espacio entre las repeticiones individuales.

Por su parte, round lo que hace es ajustar la imagen individual, de modo que la expande o contrae para ajustarla al espacio disponible. En ambos casos la repetición de los fondos nunca se mostrará cortada.

Siempre se podrá combinar en cada eje, con valores mixtos, por ejemplo, utilizando background-repeat: space round, lo que aplicará space al eje X y round al eje Y. Si sólo se especifica uno, se aplicará a ambos ejes.

La propiedad background-attachment

La propiedad background-attachment especificará si la imagen de fondo seguirá el desplazamiento del usuario al hacer scroll por la página, es decir, si el usuario al hacer scroll y bajar para ver el contenido de la página, la imagen de fondo de desplazará hacia arriba siguiendo el flujo normal de una página. Este comportamiento se consigue con la opción scroll, que es la que viene establecida por defecto.

Por el contrario, si indicamos el valor fixed, la imagen de fondo se quedará fijada y no se moverá mientras el usuario se desplaza por la página, algo que puede ser útil en muchos escenarios.

La propiedad background-position

La propiedad background-position permite desplazar la imagen en la zona especificada por y por . Por defecto, esos valores son 0% 0%, y pueden especificarse tanto con unidades (porcentajes, píxels, etc...) como mediante palabras clave que representan zonas predefinidas (top, left, right, bottom y center).

Si sólo se especifica un valor, se tomará para el eje x, mientras que el valor del eje Y será automáticamente establecido a center (o 50%).

La propiedad background-clip / -origin

En CSS existen unas propiedades para indicar como afectará la imagen de fondo al elemento según su modelo de cajas. Es importantísimo que conozcas como funciona el modelo de cajas y concretamente la propiedad box-sizing para entender bien estas propiedades.

Dichas propiedades son las siguientes:

Por un lado, la propiedad background-clip establece el área externa que afectará la imagen de fondo, mientras que background-origin establece el área interna que afectará la imagen de fondo. La primera utiliza border-box como valor por defecto, mientras que la segunda utiliza padding-box. Para entenderlo bien, juega a cambiar los valores en la siguiente demo:

.image {
  width: 472px;
  height: 472px;
  background: url("manzdev.png");
  border: 40px dashed #0004;
  padding: 20px;
  background-clip: var(--clip, border-box);
  background-origin: var(--origin, padding-box);
}

fieldset {
  display: inline-flex;
  border: 1px solid #000;
  margin-bottom: 0.5rem;
}

select {
  font-size: 1.2rem;
  padding: 0.5rem;
}

fieldset:nth-child(1):has(.o1:checked) ~ .image { --clip: padding-box; }
fieldset:nth-child(1):has(.o3:checked) ~ .image { --clip: content-box; }

fieldset:nth-child(2):has(.o2:checked) ~ .image { --origin: border-box; }
fieldset:nth-child(2):has(.o3:checked) ~ .image { --origin: content-box; }

<fieldset>
  <legend>background-clip</legend>
  <select>
    <option class="o1">padding-box</option>
    <option class="o2" selected>border-box</option>
    <option class="o3">content-box</option>
  <select>
</fieldset>

<fieldset>
  <legend>background-origin</legend>
  <select>
    <option class="o1" selected>padding-box</option>
    <option class="o2">border-box</option>
    <option class="o3">content-box</option>
  <select>
</fieldset>

<div class="image"></div>

Ambas propiedades pueden tomar uno de los siguientes valores:

Consejo: Observa el borde grueso punteado que usamos en el ejemplo. Usando border-box la imagen de fondo se extenderá en todo el elemento, incluyendo borde, espaciado y contenido. El valor padding-box extenderá la imagen de fondo sólo mediante el padding y el contenido, y por último, la propiedad content-box extenderá la imagen de fondo sólo en la zona del contenido.

La propiedad background-size

Una propiedad muy interesante es background-size, la cuál nos permite dar un tamaño a la imagen de fondo. Podemos ajustar tanto el tamaño de ancho como el de alto, e incluso tenemos algunas palabras clave predefinidas para obtener un resultado específico. Veamos la sintaxis:

Por defecto, una imagen de fondo toma automáticamente el tamaño de la imagen (que podría ser demasiado grande, por ejemplo). Para no tener que modificar la imagen original de forma manual con un editor de imágenes, podemos utilizar esta propiedad y ajustarla a nuestro agrado mediante CSS:

.element {
  width: 320px;
  height: 320px;
  background-image: url("https://manz.dev/manz-logo.png");

  /* La imagen es de 320x320 píxels, la cambiamos a 160x160 */
  background-size: 160px 160px;
}

<div class="element"></div>

Ten en cuenta que al indicar el tamaño de ancho y alto de forma manual, hay que vigilar el tamaño original de la fotografía para evitar que se deforme y aparezca estirada o deformada porque el nuevo tamaño no manteniene la proporción de aspecto.

Ten en cuenta que con background-size puedes utilizar los siguientes valores:

Los dos últimos valores, cover y contain, sólo pueden indicarse en el caso de que se especifique un sólo parámetro como valor en la propiedad background-size.