Allineare immagine di sfondo con immagine in primo piano

[Shikamaru93]

Non riesco a venirne a capo.
Voglio che questa immagine di sfondo venga allineata con questa. Ho provato una marea di soluzioni e non ne va bene una o perchè non compare niente, o perchè non si allineano o perchè una delle due viene tagliata.
Il problema è che dovrebbero essere immagini che al click aprono un menù ad albero e col codice che ho ho bisogno di una struttura del tipo

<li>titolo <ul><li>link</li></ul></li>

quindi ho provato a dare un id al primo li e mettere li lo sfondo e al posto del titolo l'immagine

 <img src="...">

ma non vengono allineate.
Ho anche provato ad usare una serie di div: il primo che contenesse lo sfondo e il secondo che contenesse l'immagine caricandoli col css ma l'unica soluzione era quella più senza senso dove mettevo il div dello sfondo in primo piano e il secondo div dietro ma facendo il contrario per ordinarli come volevo io non si vedeva più il testo.

Lascio il codice della pagina. Se però mi date un sito per creare uno snippet (funzionante non come runnable che devi pregarlo a caricare una pagina o jqualcosa dove ti vincola nei tag che devi usare) così da aver un'idea di come funziona dato che lo sto facendo girare in locale per ora. Altrimenti se esiste un modo da avere un server temporaneo dove caricare i file per un certo periodo di tempo e vederli funzionare sarebbe anche meglio.

Allego i file perchè sono troppo grossi i codici e mi da noia il sito a caricarli.