Color e imagen de fondo
Aplique colores e imágenes de fondo mediante las propiedades background-color y background-image.
Color e imagen de fondo es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
background-color
La propiedad background-color establece un color sólido detrás de un elemento. Acepta cualquier valor de color CSS y se ve a través de las áreas transparentes de las imágenes de fondo.
<div class="hero">Hero section</div>
background-image
background-image establece una o más imágenes como fondo del elemento. Las imágenes se superponen a background-color.
<div class="banner">Banner (image missing → fallback color shows)</div>
background-size
background-size controla las dimensiones de la imagen. Valores principales:
cover— rellena el área y recorta la imagen si es necesariocontain— encaja completamente en el interior, aunque puede dejar espacios100% 100%— se estira para rellenar exactamente
<div class="hero"></div>
background-position
background-position establece dónde se coloca la imagen. Utilice palabras clave o valores de porcentaje o longitud.
<div class="hero"></div>
background-repeat
De forma predeterminada, las imágenes se repiten en mosaico. Controle la repetición con background-repeat:
<div class="hero"></div>
<div class="pattern"></div>
background-attachment
background-attachment determina si una imagen se desplaza con la página. fixed crea un efecto similar al paralaje; scroll es el valor predeterminado.
<div class="spacer">Scroll down ↓</div>
<div class="parallax">Fixed background</div>
<div class="spacer">Scroll up ↑</div>
Múltiples fondos
CSS admite varias capas de fondo separadas por comas. La primera de la lista aparece encima.
<div class="card">Overlay + photo layers</div>
Notación abreviada de background
La notación abreviada background combina todas las propiedades de fondo en una sola declaración. El orden importa para el tamaño: escríbalo después de la posición, separado por /.
<div class="hero"></div>
Recorte y origen del fondo
background-clip controla dónde se pinta el fondo con respecto al modelo de caja. background-origin establece el punto de referencia para el posicionamiento.
<div class="card">Clip & Origin</div>
Recorte del fondo del texto
Utilice background-clip: text con un color de texto transparente para recortar una imagen de fondo o un degradado con la forma del texto.
<h1>Gradient Text</h1>
object-fit para <img> frente a background-image
Para las etiquetas <img>, utilice object-fit: cover y object-position en lugar de background-image. Así las imágenes permanecen en el DOM, lo que favorece la accesibilidad y el SEO.
<img class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />
Comprobación rápida
¿Qué valor de background-size rellena el área y recorta la imagen en lugar de dejar espacios?
Resumen
Utilice background-color como alternativa debajo de las imágenes. background-size: cover es la opción habitual para imágenes de encabezado que ocupan todo el espacio. Las capas de fondo múltiples permiten realizar composiciones. La notación abreviada combina todas las propiedades de fondo de forma concisa.
Aprende CSS con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Color e imagen de fondo» es gratis?
Sí — el texto completo de «Color e imagen de fondo» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Color e imagen de fondo»?
Aplique colores e imágenes de fondo mediante las propiedades background-color y background-image. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Color e imagen de fondo»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Valores de color: nombres, hexadecimal, RGB y HSL
- Color e imagen de fondo
- Degradados: lineales y radiales
- Opacidad y transparencia RGBA