[CSS] Intrecciare repeat-x e repeat-y

[itised]

Salve!
Vorrei realizzare un div footer il quale deve avere un background sfumato, in un sito che ha l'effetto ombra sui lati. Allora ho creato 2 pattern: uno sfumato verticale per il footer da usare con repeat-x e uno orizzontale per l'ombra, al centro del quale vi è una striscia trasparente della lunghezza giusta, da usare con repeat-y. Ora come faccio a sovrapporli? Vorrei ottenere il footer sfumato con ai suoi lati l'ombra... ho provato a creare un div footerin interno al footer e gli ho dato la stessa dimensione del padre, gestendoli con z-index ma niente da fare...

div#footerin{z-index:1; background-color:transparent; background: url(img/content.gif) repeat-y; height: 40px;}
div#footer{z-index:0; background-color:transparent; background: url(img/footer.gif) repeat-x; height: 40px;}

Queste sono le righe interessate nel CSS. Come potrei risolvere? Possibilmente senza dover creare 2 colonnine laterali apposta per l'ombra

[itised]

Scusate! Ho risolto! Se fosse utile a qualcuno... il metodo è proprio quello già descritto! E' solo che sono così cretino che quando ho aggiunto il div footerin nel file html mi sono dimenticato di uploadarlo, uploadavo solo il css