I've seen many references in different frameworks for a component called Hero which is as far as I know a simple big space with few text and a call to action zone of a webpage. Bootstrap, Foundation, Bullma etc. All of them use the same word. I understand what it does and how to use it I just don't get why they chose that name.
Another thing I cant understand is why all of them use an html IMG object as background and not the old css background tag. I find really nasty the use of mixed positioning to achieve the background behavior since it already exist in css.
It's a long-standing design term that's come across from print to the web. You could just as easily call it a "promo" (promotional) image, a primary image, a main banner, etc.
Most would use IMG as it should theoretically be actual content and not just decoration, so you'd want the ability to manage it via a CMS and to add alt text.
Broadly though if this really annoys you just make your own and call it something else ;)
I don't know its etymology, but I often struggle with coming up with an intuitive name that my client will understand when they're editing it in the dashboard. Suggestions other than 'banner'?
Adam
Web Developer
Regarding hero images:
My understanding is that it was a term that came out of the print design world (magazines, I'd guess) to describe a cover with a picture of a celebrity or "hero" with various headlines superimposed over top. From there, the term just found its way to the web.
Disclaimer: I tried to validate this by searching for it on google and only found other anecdotal evidence, so, take this explanation with a grain of salt.