Publicidad
Publicidad

Curso Completo de CSS de principiante a avanzado - CURSO de CSS - 40 ¿Como PONER de FONDO una IMAGEN en CSS?

Miniatura del vídeo

Clase: Cómo poner una imagen de fondo en CSS paso a paso

Aprende a utilizar la propiedad background-image en CSS para añadir imágenes de fondo a tus elementos HTML, usando rutas externas o archivos locales de tu proyecto.

En esta lección del curso, se explica cómo enriquecer el diseño visual de un sitio web integrando recursos gráficos como fondos. Se detallan los métodos para vincular imágenes desde servidores externos o desde carpetas internas del proyecto, asegurando una correcta gestión de las rutas de archivos, una habilidad fundamental para cualquier desarrollador frontend que utiliza la plataforma educativa.

Puntos Clave de la Lección

  • Uso de la propiedad background-image: Se introduce la sintaxis necesaria, utilizando la propiedad background-image junto con la función url() para definir la imagen que se visualizará en el elemento [00:30].
  • Implementación de imágenes externas: Se demuestra cómo obtener la URL de una imagen desde internet y cómo insertarla correctamente dentro del CSS, con la opción de utilizar comillas o escribirla directamente [01:06].
  • La propiedad shorthand 'background': Se explica que background es una propiedad abreviada que permite agrupar background-image y otras configuraciones, simplificando el código CSS [02:04].
  • Gestión de imágenes locales: Se detalla cómo referenciar archivos guardados en el proyecto mediante el uso de navegación de directorios (../) para salir de la carpeta actual y acceder al directorio de imágenes [03:45].
  • Sintaxis flexible: Se aclara que tanto para imágenes locales como externas, el uso de comillas dentro de la función url() es opcional, manteniendo la funcionalidad del código intacta [05:17].

Productos útiles para este curso

Para el desarrollo de este curso se recomienda contar con un editor de código como Visual Studio Code y un navegador web moderno para la inspección de elementos en tiempo real.

Resumen Final

Al finalizar esta clase, se comprende que la inserción de imágenes de fondo es un proceso versátil que puede ejecutarse mediante rutas absolutas (web) o relativas (locales). Es vital recordar la jerarquía de carpetas al organizar archivos y entender que el uso de la propiedad abreviada background optimiza la escritura de estilos. Estos conocimientos son esenciales para lograr interfaces web más dinámicas y visualmente atractivas.

Créditos del Autor

Esta lección ha sido adaptada del contenido original creado por el canal, especializado en el desarrollo web y programación frontend. Se recomienda visitar su canal oficial de YouTube para profundizar en estos contenidos.

40. CURSO de CSS - 40 ¿Como PONER de FONDO una IMAGEN en CSS?

Contenido

Guarda tu progreso

Presiona Ctrl + D para favoritos.

Ver otros cursos