[Dúvida] Qual a vantagem de usar uma div com background em vez de uma tag <img> no HTML?

Olá, Julio! Como vai?

Quando criamos uma hero, a ideia é ter uma imagem que preencha totalmente a área, mesmo que parte dela seja cortada.
A tag <img> tenta sempre manter sua proporção original e não foi feita para "cobrir" um espaço fixo.
Já uma div com background-image permite controlar melhor o comportamento da imagem no layout.

Por que usar background-image?

• Permite usar background-size: cover, que faz a imagem preencher toda a área da hero.
• Dá para controlar cortes, posição e repetição sem distorcer a imagem.
• É ideal quando a imagem é decorativa e não faz parte do conteúdo.

Veja este exemplo:

<div class="hero"></div>

.hero {
  width: 100%;
  height: 300px;
  background-image: url("hero.jpg");
  background-size: cover; 
  background-position: center;
}

Este código deixa a imagem sempre ajustada ao espaço disponível, mantendo o design consistente em telas diferentes.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!