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 ...

César Velandia

César Velandia

Pregunta
studenthace 4 años

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 Mundo Tech a(href="#") Entra ya!!
2 respuestas
para escribir tu comentario
    César Velandia

    César Velandia

    studenthace 4 años

    Muchas gracias, me quedó claro 👌

    Irving Juárez

    Irving Juárez

    studenthace 4 años

    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

Curso de Maquetación en CSS [Empieza Gratis]

Curso de Maquetación en CSS [Empieza Gratis]

Construye un blog personal con CSS, usando Grid y técnicas de maquetación. Aprende a organizar tu proyecto con clases específicas, incluye herramientas como Chrome DevTools para depurar, y haz que tu sitio sea responsive con media queries.

Curso de Maquetación en CSS [Empieza Gratis]
Curso de Maquetación en CSS [Empieza Gratis]

Curso de Maquetación en CSS [Empieza Gratis]

Construye un blog personal con CSS, usando Grid y técnicas de maquetación. Aprende a organizar tu proyecto con clases específicas, incluye herramientas como Chrome DevTools para depurar, y haz que tu sitio sea responsive con media queries.