¿Cómo integrar una imagen en CSS utilizando directo el file path?
El diseño web contemporáneo requiere precisión en la integración de imágenes para mejorar la estética de nuestro sitio web. En este caso, estamos colocando una imagen específica como fondo utilizando CSS. Esto permite una mejor presentación visual y flexibilidad en el manejo de la estética.
¿Qué pasos seguir para ubicar correctamente una imagen?
Coloca la imagen en la estructura de carpetas correcta: Asegúrate de que tu imagen esté almacenada en la carpeta correspondiente dentro de tu proyecto. Por ejemplo, si tienes una carpeta denominada imagenes, coloca allí el archivo de imagen deseado.
Establecer el file path en el archivo CSS: Para que CSS reconozca la ubicación de la imagen, es fundamental escribir la ruta del archivo correctamente. Utiliza dos puntos (..) para retroceder un directorio si es necesario.
background-image:url('../imagenes/cover.jpg');
Este código asume que tienes un archivo cover.jpg dentro de una subcarpeta llamada imagenes.
¿Cómo aseguramos que la imagen se muestre correctamente?
Para que tu imagen se presente centrada y sin repeticiones, puedes ajustar varias propiedades CSS:
Background-position: Asegúrate de que la imagen siempre esté centrada.
background-position: center;
Background-repeat: Previene que la imagen se repita más de una vez.
background-repeat: no-repeat;
Background-size: Ajusta el tamaño para que cubra completamente el área designada.
background-size: cover;
Una vez realizados estos ajustes, guarda los cambios en tu archivo CSS, y si todo está configurado correctamente, la imagen debería mostrarse de manera adecuada en tu sitio web.
¿Cuál es el siguiente paso después de integrar la imagen?
Habiendo configurado la imagen de fondo, el siguiente paso sería estilizar el texto superpuesto. Esto involucra seleccionar y aplicar la fuente tipográfica adecuada, que esté en consonancia con el diseño general del proyecto. También puedes mejorar la apariencia del texto ajustando colores, tamaños de fuente y otras propiedades CSS relevantes.
Aprender a dominar estos aspectos en CSS no solo mejora tus habilidades de diseño web, sino que también asegura que puedes crear interfaces visualmente atractivas y funcionales. ¡Sigue explorando y practicando para alcanzar el dominio completo!
me encanta como explica el profe degranda, es muy ordenado y se le entiende muy bien, haba resuelto el desafío, pero la manera en que lo hizo es mucho mas ordenado y con mas sentido, me doy cuenta que el profesor tiene muy buenas practicas.
Tiene razón de lo que dices.. Realmente me ha gustado como explica y el orden que lleva sus videos. Espero que lo podamos ver en otros cursos.
totalmente de acuerdo, su forma de hacer y explicar las cosas es muy buena, también logre el desafió, pero me gusta mucho su forma de maquetar y estoy aprendiendo mucho!
En mi caso, al ver que utiliza muchas veces background, preferí utilizar shorthand para resumir el estilo.
También hice una corrección para que me imagen se viera de forma completa cambiando el height de la clase home-main por:
height:calc(100vh - 140px)
mientras menos mejor.
Excelente aporte me sirvio el height: calc(100vh - 140px) ✨
Para que la imagen quede completa yo utilicé mejor un height del 100% del viewport menos el tamaño del header
.home-main{height:calc(100vh - 140px);}
Wow. Algo simple pero no se me ocurrio. Gracias!
Muy efectiva la solución. Iré a buscar más sobre cómo usar calc.
Por acá les dejo un enlace a una galería con imágenes muy buenas!
También les dejo un tip: Una vez encuentran su imagen favorita en internet, le dan click izquiero y seleccionan Copiar dirección de la imagen y así, pegando la dirección en url("dirección_imagen") pueden usar la imagen sin necesidad de descargarla ;)
En la sección de background-img, siempre es bueno agregarle un color de fondo parecido a la imagen, de esa forma, si por algún motivo no carga la imagen, el color ayuda a que el texto que va sobre la imagen no se pierda.
Diego tiene el don de explicar y llegar a la gente, en este proyecto aunque mi código es diferente hé aprendido a ver otro punto de vista, grande Diego ✅👨🏻💻💪🤓📈
Honestamente lo tiene, es lento, pero muy puntual y reafirma muy bien los conocimiento para que no se olviden
en mi caso use un codigo completamente diferente puse el background image en el > <Body>
y use la propiedad de background-position-y:85px para bajar la imagen y que empezara desde donde empieza mi contenido main.
a continuacion el resultado:
brutal entender bien la funcionalidad te hace ganar mucho tiempo a la hora de trabajar realizando los diseños del equipo
A mi me funciona escribir la url sin las comillas, lo he probado en varios navegadores y plataformas y me funciona igual. en el examen respondí: background-image: url() y me la tomó como errada y tengo esa duda ahora.
No sé porqué al poner la imagen de fondo no se me completaba. Me tocó ponerlo así:
Mi código es diferente pero llegué al mismo resultado
Lo que importa es que lo lograste.
Como dijo el profe en la clase pasada hay muchas maneras de lograr el resultado.
El mío también pero no importa, hay muchas maneras de conseguir el resultado :D
Cuál es la diferencia entre usar la imagen con etiqueta img en el html y la imagen en el CSS con la propiedad background? Por ejemplo el reto lo hice con la etiqueta img en el html y modificando el fondo con posición relativa y absoluta, pero no sé si eso no sea buena práctica.
main
section.main-section
div.main-section__background
img(src="./assets/img/Cover.png", alt="") h1.main-section__text Conoce las novedades y noticias del MundoTecha(href="#")Entra ya!!
Bueno, la etiqueta <img> es eso, una etiqueta. Así que cuando tu pagina no cargue la imagen correctamente, te va a aparecer un logo como de un documento en blanco y el lugar en el que se suponía que iba a estar tu imagen se va a hacer mas pequeño.
.
Por otro lado, cuando nosotros usamos la propiedad background en CSS, un <div> puede tener una imagen, un color plano o un degradado como fondo. En el caso de que el background-image no cargue correctamente, el <div> va a tomar el color blanco o un color que ya le hayas dado por defecto. Sin embargo, el lugar en donde debió haber ido tu imagen se va a quedar en su lugar
.
Desde mi punto de vista, yo me siento mas cómodo trabajando con <div>'s usando la propiedad background-image. Ya que me permite centrar la imagen y hacer otras cosas interesantes
Muchas gracias, me quedó claro 👌
Es mala práctica importar fuentes con un @import?
Es que yo usualmente lo hago en el HTML con la etiqueta <link>.
Excelente pregunta Sergio 😄
Este tema se toca en el curso de Optimización web, pero respondiendo a tu pregunta, en lo personal pienso que no es mala práctica, sino que existen mejores formas de importar fuentes de Google Fonts, ya que puedes tener mejores resultados en cuestión de performance usando ciertas técnicas. Entre ellas esta una que hace una conexión previa con tu sitio. Pero en mi opinión la mejor forma es descargando la fuente e importándola en tu sitio porque no tendrás que recurrir a sitios externos (que pueden afectar a la carga inicial del sitio) al momento de ingresar a tu website.
Espero haber solucionado tu duda 😉
Gracias por tu respuesta, todo ha quedado más claro. :)
Hola, ya había completado el reto, pero lo estoy perfeccionando con el método de Diego. Solo quiero aportar que yo no planeaba mantener la franja blanca en header, así que inserté la imagen como lo menciona aquí pero a header le agregué position: absolute para que estuviera "transparente" y se viera la imagen de fondo.
De la documentación de MDN:
Background-size: cover; -> Escala la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío.
Fuente: MDN
