diferencia entre poner la imagen como background e img?

Valente IA

Valente IA

Pregunta
studenthace 5 años

diferencia entre poner la imagen como background e img?

3 respuestas
para escribir tu comentario
    Anfernee Valera

    Anfernee Valera

    studenthace 4 años

    Wow, me ayudaron muchísimo con esto no encontraba la respuesta. Muchas gracias

    Andres Acevedo

    Andres Acevedo

    studenthace 5 años

    Hola valente-ia, basicamente la diferencia seria la siguiente:

    img es una etiqueta donde puedes llamar una imagen por medio de src="", esta puedes editar su alto y su ancho por medio de css, pero si quieres que se amplie o se adapte a un contenedor es un trabajo tedioso

    background-image a diferencia de la etiqueta img, esta pertenece a css, esta funciona si necesitas que una imagen se adapte a un contenedor que tengas, ejemplo un div circular y quieres poner una foto de una persona dentro, con background image puedes hacerlo de manera sencilla, poderla manipular que se adapte al tamaño de contenedor que tengas, escalarla, generar efectos tipo fixed o parallax

    Leonardo de los angeles Espinoza Hernandez

    Leonardo de los angeles Espinoza Hernandez

    studenthace 5 años

    Hola @valent-ia!

    Imagina que tienes una hoja en blanco y encima le pegas una imagen esto es como si usaras la etiqueta

    img
    en tu codigo, al contrario el usar el
    background-image
    es como si tuvieses una fotografía y sobre ella pusieras notas o escribieras sobre ella.

    Espero haberme expresado bien :D, pero si no te quedo claro puedes responder al comentario para darte un ejemplo más practico.

Curso Práctico de HTML y CSS

Curso Práctico de HTML y CSS

Construye un clon de Google usando HTML y CSS. Aprende a estructurar y estilizar un sitio web completo, desde el header hasta el footer, usando técnicas de maquetación como Flexbox y Grid. Ideal para afianzar tus fundamentos.

Curso Práctico de HTML y CSS
Curso Práctico de HTML y CSS

Curso Práctico de HTML y CSS

Construye un clon de Google usando HTML y CSS. Aprende a estructurar y estilizar un sitio web completo, desde el header hasta el footer, usando técnicas de maquetación como Flexbox y Grid. Ideal para afianzar tus fundamentos.