background

background es el shorthand que concentra en una sola declaración las cinco sub-propiedades del fondo: color, imagen, repetición, posición y tamaño. En vez de escribir cinco líneas separadas para configurar un hero con gradiente, se puede expresar todo en una. Es el shorthand más complejo de la familia de fondos porque sus valores deben seguir un orden específico y porque tiene una regla crítica que sorprende al principio: resetea todas las sub-propiedades no mencionadas a sus valores iniciales, aunque esas sub-propiedades estuvieran declaradas antes.

El shorthand es muy común en código de producción para configuraciones de fondo que se escriben una sola vez. Pero cuando se trabaja con capas o se necesita sobreescribir solo una parte del fondo más adelante, puede ser más claro usar las sub-propiedades individuales. Entender cuándo usar cada forma es parte del oficio.

El background de CSS funciona como una “receta”: cada parte tiene su posición y su separador. El único par que tiene una sintaxis especial es posición/tamaño, separados por /. Todo lo demás se escribe en orden libre pero con convenciones que mejoran la legibilidad.

Cómo funciona

Escribir background: red no solo establece el color — también resetea todas las demás sub-propiedades a sus valores iniciales: background-image: none, background-repeat: repeat, background-position: 0% 0%, background-size: auto. Esto es el “reseteo implícito” del shorthand, que es la causa del gotcha más frecuente con esta propiedad.

Las sub-propiedades que controla background en su forma completa son:

Sintaxis

/* Solo color */
.caja { background: #f1f5f9; }

/* Solo gradiente */
.hero { background: linear-gradient(to right, #1e3a5f, #3a7bd5); }

/* Imagen sin repetición, centrada, cubriendo */
.portada {
  background: url('foto.jpg') no-repeat center / cover;
}

/* Completo: color + gradiente + comportamiento */
.hero {
  background: #1e3a5f linear-gradient(180deg, #1e3a5f, #3a7bd5) no-repeat center / cover;
}

La barra / es obligatoria para separar background-position de background-size. Sin la barra, el navegador no puede distinguirlos — ambos aceptan keywords similares.

Sub-propiedades en detalle

background-repeat

Controla si la imagen de fondo se repite y en qué dirección. El valor inicial es repeat, que produce el mosaico clásico.

.hero  { background-repeat: no-repeat; } /* sin mosaico */
.base  { background-repeat: repeat; }    /* mosaico en X e Y (default) */
.banda { background-repeat: repeat-x; } /* solo horizontal */
.lista { background-repeat: repeat-y; } /* solo vertical */
.smart { background-repeat: round; }    /* repite sin cortar, ajusta escala */
.smart { background-repeat: space; }    /* repite con espacio entre copias */

Para fotografías y gradientes que deben cubrir el elemento, no-repeat es prácticamente siempre el valor correcto.

background-size

Controla el tamaño de la imagen de fondo. Es donde viven los valores más usados en producción.

.hero  { background-size: cover; }    /* cubre todo; puede recortar la imagen */
.logo  { background-size: contain; }  /* imagen completa visible; puede dejar bandas */
.exact { background-size: 200px 100px; } /* tamaño exacto */
.porcent { background-size: 100% auto; } /* ancho al 100%, alto proporcional */

cover vs contain — la distinción central:

cover garantiza que el elemento siempre está cubierto: la imagen escala hasta que su lado más pequeño alcanza el borde del elemento, y lo que sobra se recorta. Es el valor para heroes y banners donde no pueden aparecer bandas.

contain garantiza que la imagen completa es siempre visible: escala hasta que su lado más grande encaja en el elemento, y si las proporciones no coinciden aparecen bandas del color de background-color. Es el valor para logos e íconos donde ver la imagen completa importa más que cubrir el área.

background-position

Define dónde se coloca la imagen dentro del elemento, tomando como referencia la esquina superior izquierda por defecto.

.hero  { background-position: center; }         /* centrada en X e Y */
.card  { background-position: top right; }      /* esquina sup. derecha */
.panel { background-position: 50% 30%; }        /* 50% horizontal, 30% vertical */
.exact { background-position: 20px 40px; }      /* offset exacto */

Keywords válidas para cada eje: top, bottom, left, right, center. Se combinan libremente: top center, bottom left, center right. Un solo valor aplica al eje horizontal y el vertical se centra.

Ejemplo realista

/* Hero con gradiente sobre color de fallback */
.hero {
  background: #1e3a5f
    linear-gradient(180deg, #1e3a5f 0%, #3a7bd5 100%)
    no-repeat center / cover;
  min-height: 400px;
}

/* Tarjeta con foto, con overlay para legibilidad del texto */
.tarjeta-foto {
  background:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url('foto.jpg') no-repeat center / cover;
}

/* Solo propiedades individuales (más explícito para modificar una parte) */
.hero {
  background-color: #1e3a5f;
  background-image: linear-gradient(180deg, #1e3a5f, #3a7bd5);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Cuándo usar el shorthand vs. las longhands

Notas, gotchas e interacción

• El shorthand resetea las sub-propiedades no mencionadas. Escribir background: red borra cualquier background-image, background-repeat, etc. que estuviera activo. Si después de establecer un fondo completo querés cambiar solo el color, usá background-color: rojo (la longhand), no background: rojo.
• La barra / es obligatoria entre posición y tamaño. background: center cover es inválido. La sintaxis correcta es center / cover. Si se omite la barra, el navegador no puede interpretar cuál es la posición y cuál el tamaño.
• El orden recomendado para legibilidad: color image repeat position/size. Técnicamente el color puede ir antes o después de la imagen, pero este orden es el más leído y el que sigue la lección.
• El shorthand background no puede mezclar shorthand y longhand en la misma regla. background: url() no-repeat; background-size: cover; funciona solo si background-size va después — el shorthand no resetea las longhands que vienen después en la misma declaración de bloque.
• Herramienta de DevTools. Las DevTools muestran las sub-propiedades computadas individualmente, aunque hayas usado el shorthand. Es la forma más directa de entender qué valor resolvió cada sub-propiedad.

Vigente / legacy

background como shorthand existe desde CSS2.1. La capacidad de incluir background-size en el shorthand (con la notación /) es CSS3 (Baseline widely). No hay forma legacy. Los prefijos vendor para gradientes (-webkit-linear-gradient) fueron necesarios antes de 2013 pero hoy son legacy y no deben usarse.