Fondos y bordes ejercicio

Fondos de la caja

El fondo de un elemento CSS cubre el área de content + padding — todo lo que está dentro del borde. Con unas pocas propiedades podés pasar de un fondo blanco por defecto a degradados, colores sólidos y combinaciones elaboradas.

background-color — color sólido de fondo

La propiedad más directa. Acepta cualquier valor de color:

.card   { background-color: #f1f5f9; }           /* gris muy claro */
.hero   { background-color: hsl(210, 70%, 15%); } /* azul oscuro */
.badge  { background-color: rgb(37, 99, 235); }   /* azul */
.alerta { background-color: rgba(220, 38, 38, 0.1); } /* rojo tenue */

El valor inicial es transparent — cada elemento comienza sin fondo propio y “deja ver” el fondo del ancestro. Un <div> sin estilos no tiene fondo blanco; el blanco que ves es el del <body>.

background-image — imagen o gradiente de fondo

background-image puede recibir una URL o una función de gradiente.

url() — imagen desde una ruta:

/* En producción real, esto carga la imagen del servidor */
.hero { background-image: url('foto-escritorio.jpg'); }

Nota sobre el sandbox: el sandbox de este playground es un <iframe> aislado que no puede cargar recursos externos. url('https://...') no mostrará nada. Para practicar usamos gradientes — son generados completamente por CSS y no dependen de archivos externos.

linear-gradient() — degradado lineal:

/* dirección + color inicial + color final */
.hero  { background-image: linear-gradient(to right, #1e3a5f, #3a7bd5); }
.panel { background-image: linear-gradient(180deg, #667eea, #764ba2); }

La dirección puede ser una keyword (to right, to bottom) o un ángulo en grados (45deg, 180deg). Sin dirección explícita el default es to bottom (equivalente a 180deg).

/* Con paradas de color posicionadas */
.card {
  background-image: linear-gradient(
    to right,
    #1e3a5f 0%,
    #3a7bd5 50%,
    #7ec8e3 100%
  );
}

radial-gradient() — degradado radial:

Se expande desde un punto central hacia afuera:

.avatar { background-image: radial-gradient(circle, #667eea, #764ba2); }
.panel  { background-image: radial-gradient(circle at top left, #f9a8d4, transparent); }

background-repeat, background-size y background-position

Estas tres propiedades controlan cómo se comporta la imagen de fondo dentro del elemento.

background-repeat

Por defecto la imagen de fondo se repite en mosaico. no-repeat evita que eso ocurra:

.hero { background-repeat: no-repeat; } /* sin mosaico */
/* otros valores: repeat (default), repeat-x, repeat-y */

background-size

Controla el tamaño de la imagen de fondo:

.hero { background-size: cover; }    /* cubre TODO el elemento, recortando si hace falta */
.card { background-size: contain; }  /* imagen completa visible, pueden aparecer bandas */
.panel { background-size: 100% 100%; }

cover vs contain — la distinción central:

covercontain
GarantíaEl elemento siempre está cubiertoLa imagen siempre es visible completa
RiesgoPartes de la imagen pueden recortarsePueden aparecer “bandas” de background-color
Caso de usoHero, banners, fondos de páginaLogos, íconos — ver la imagen completa

Regla nemotécnica: cover = CUBRE todo; contain = la imagen ENTRA completa.

background-position

Define dónde se ubica la imagen dentro del elemento:

.hero  { background-position: center; }      /* centrada — equivale a 50% 50% */
.card  { background-position: top right; }   /* esquina superior derecha */
.panel { background-position: 20% 80%; }     /* coordenadas exactas */

Keywords disponibles: top, bottom, left, right, center. Se combinan: top center, bottom left.

background shorthand — todo en una línea

El shorthand permite escribir en una sola declaración lo que normalmente ocuparía 5 líneas:

/* color imagen repetición posición/tamaño */
.hero {
  background: #1e3a5f linear-gradient(to right, #1e3a5f, #3a7bd5) no-repeat center / cover;
}

La barra / separa posición y tamaño: center / cover = posición center, tamaño cover.

Advertencia: el shorthand resetea todas las sub-propiedades no mencionadas a sus valores iniciales. Si después escribís background: red, background-size vuelve a auto aunque antes lo hubieras definido.

Límite del motor: el validador no puede leer el shorthand background por computed — siempre comprueba las sub-propiedades individuales (background-color, background-size, etc.). Podés escribir el shorthand o las propiedades sueltas: el efecto computado es idéntico.

Tu turno: en el sandbox aplicá los fondos a .hero, .card y .badge siguiendo las instrucciones. Usá 180deg para el gradiente del hero — el validador compara la dirección tal como la escribís.

Fondos del hero y la tarjeta de Nómade Studio

Nómade Studio necesita estilizar la sección principal y una tarjeta de servicio: **1.** `.hero`: fondo con gradiente lineal — `background-image: linear-gradient(180deg, #1e3a5f, #3a7bd5)`. Para que cubra todo el elemento sin repetirse: `background-repeat: no-repeat` y `background-size: cover`. **2.** `.card`: fondo sólido gris claro — `background-color: #f1f5f9`. Centrar el fondo: `background-position: center`. **3.** `.badge`: `background-color: rgb(37, 99, 235)` — azul para la etiqueta de categoría. El validador comprueba las sub-propiedades individuales. Podés usar el shorthand `background` o las propiedades sueltas — el resultado computado es el mismo.

Preview

En la referencia