La cosa non funziona perché commetti diversi errori.

- Se togli l'elemento <img> il div (#home-image) che lo contiene ha un effetto collassamento (quantomeno su desktop) perché gli elementi che stanno dentro (a parte <img>) hanno position:absolute che li rimuove dal normale flusso dei contenuti.

- In qualunque caso, per logica presumo che quel div (che appunto ha id #home-image) debba contenere giusto l'elemento <img>. Perché ci sta altra roba dentro? Ce l'hai messa tu arbitrariamente o il template lo consente?
In questo caso, se vuoi che l'elemento non collassi, andrebbe tolto il position:absolute dagli elementi figli. A quel punto puoi impostare l'immagine come background.

- Oltre questo, stai sbagliando ad applicare il valore cover in quel modo (dove hai visto che si applica così?). Se vuoi usare la forma contratta per la proprietà background fai una ricerca del tipo "background cover shorthand" e vedi come va applicato quel valore.
Ti consiglio inoltre di utilizzare la console web del tuo browser (premi F12) che ti permette anche di verificare se le regole CSS definite per i singoli elementi sono valide e vengono correttamente applicate.
Può esserti utile anche passare il tuo CSS in un validatore (ad esempio questo) per verificare se ci sono errori di qualche genere.


Io so come risolvere ma vorrei che ci arrivassi da te.
Magari fai qualche prova e vedi che riesci a combinare.
Fai sapere, buon proseguimento.