Cargando...

Fondos CSS

Ya puedes colorear el texto. Ahora pinta la superficie detrás. Los fondos rellenan la caja del elemento — colores sólidos, fotos y más adelante degradados — mientras las letras quedan encima con color.

¿Qué es un fondo CSS?

Un fondo es la capa pintada detrás del contenido del elemento (y suele quedar detrás del padding). Lo controlas con una familia de propiedades: background-color, background-image, background-repeat, background-size, background-position y el atajo background. Los degradados tienen su propia lección — hoy rellenos sólidos y bases de imagen.

Propiedades de un vistazo

Aprende primero el trabajo de cada una. No necesitas todas las palabras el primer día.

📊 Propiedades cotidianas de fondo CSS

Propiedad Trabajo Arranque cotidiano
background-color Relleno sólido detrás del contenido background-color: #f1f5f9;
background-image Capa de imagen (o degradado después) background-image: url("hero.jpg");
background-repeat Embaldosar o dejar de hacerlo background-repeat: no-repeat;
background-size Escalar la imagen en la caja background-size: cover;
background-position Alinear la imagen background-position: center;
background Atajo de varios valores background: #0f172a url("a.jpg") center / cover no-repeat;

Rellenos sólidos con background-color

El fondo más simple es un color sólido. Usa cualquier valor de color que ya conozcas — con nombre, hex, rgb o hsl.

Fondo sólido de tarjeta

css
CSS Code 
.card {
background-color: #f1f5f9;
color: #0f172a;
padding: 1rem;
}

Mantén el texto legible

Pon color para las letras y background-color para la caja. Rellenos claros necesitan texto más oscuro; rellenos oscuros, texto más claro.

Imágenes con background-image

Apunta a un archivo con url("…"). Las rutas son relativas al CSS (o URL absolutas). La imagen queda detrás del contenido — no es un <img> en el flujo HTML.

Foto detrás de un bloque hero

css
CSS Code 
.hero {
background-image: url("hero.jpg");
color: white;
min-height: 12rem;
padding: 2rem;
}

Imagen vs <img>

Usa <img> cuando la foto es contenido (alt, significado). Usa background-image cuando es decoración detrás de la UI o una sección.

Para el embaldosado: no-repeat + cover

Por defecto muchos navegadores embaldosan una imagen pequeña. En héroes apaga el mosaico y escala con cover para que la foto llene la caja.

Imagen hero que llena la caja

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

cover en una frase

cover escala hasta llenar la caja — los bordes pueden recortarse. contain encaja la imagen entera — pueden verse bandas vacías.

Apunta el punto focal

background-position decide qué parte de la foto sigue visible — útil cuando cover recorta caras o logos.

Apuntar la foto

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}

Atajo (que siga legible)

Puedes combinar valores en background. Empieza en largo mientras aprendes; pasa al atajo cuando el orden te resulte familiar.

Atajo compacto de background

css
CSS Code 
.banner {
background: #0f172a url("banner.jpg") center / cover no-repeat;
color: #f8fafc;
padding: 2rem;
}

Consejo de orden

Patrón habitual: color, imagen, position / size, repeat. Si el atajo confunde, vuelve a propiedades sueltas — ambas son válidas.

Pruébalo tú

  1. .card con background-color: #f1f5f9 y texto oscuro con color.
  2. .hero con background-image: url("…"), min-height y texto claro.
  3. background-repeat: no-repeat, background-size: cover, background-position: center.
  4. Mueve position a left center o right center y mira qué queda en el encuadre.
  5. Opcional: reescribe el hero con atajo background e incluye un color de respaldo antes del url().

Errores frecuentes

  • Usar color para rellenar la caja — solo pinta letras
  • Olvidar no-repeat y que un logo se embaldose por la sección
  • Rutas rotas en url("…") (carpeta mal o sin comillas)
  • Fotos enormes sin comprimir como fondos — páginas lentas
  • Saltar a degradados complejos antes de dominar sólido + una imagen (degradados van después)

Resumen

  • Los fondos pintan detrás del contenido; color pinta el texto
  • background-color para sólidos; background-image para fotos
  • Controla fotos con no-repeat, cover/contain y position
  • El atajo es opcional — la claridad gana a la astucia al aprender
  • Recetas completas de degradado en la siguiente lección
  • Practica una tarjeta gris y un hero con foto hasta que los nombres se queden

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Css Tutorial