Fondos en CSS

Color, imágenes, degradados y cómo se dimensiona y ubica un fondo.

.hero {
  background-color: #0b0c10;
  background-image:
    linear-gradient(180deg, rgb(0 0 0 / 60%), #0b0c10),
    url("/img/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.stripe {
  background: repeating-linear-gradient(
    45deg, #14161c 0 8px, #101218 8px 16px
  );
}

Cómo funciona

1. Varios fondos se apilan de adelante hacia atrás, separados por comas.
2. background-size: cover llena la caja y recorta lo que sobra.
3. Un degradado es una imagen, así que puede apilarse sobre un color.

Palabras clave y builtins usados aquí

• background
• deg
• px
• rgb
• url

El intento, en números

Líneas

15

Caracteres a escribir

305

Tokens

68

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 54 segundos.

Escribe este fragmento

Paso 4 de 6 en Cajas; paso 17 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →