Where does it comes the word 'Hero' to identify html/css banners?

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.