CSS Menü Background Image

Hallo Gemeinde,

ich bin am verzweifeln!

Ich versuche die ganze Zeit einem Menü ein Image als Hintergrund zu geben, das aus drei Teilen besteht, da sich dass ganze nicht unter verschiedenen Auflösungen optisch verändern soll somit responsive ist. Das erste PNG ist als no-repeat markiert und das zweite als repeat-x und das dritte wieder als no-repeat. Das Problem ist dabei, dass das zweite PNG mit repeat-x das dritte PNG rauschiebt und somit nicht sichtbar ist.

Der CSS Code schaut wie folgt aus:

.menue
{
  overflow: hidden;
  background-image: url("menubg1.png"), url("menubg2.png"), url("menubg3.png");
  background-repeat: no-repeat, repeat-x, no-repeat;
}

und HTML:

<div class="menue" id="mymenue">


  <a href="index.html">Home</a>  <a href="sides/tauchen.html">Tauchen</a>  <a href="sides/ocean.html">Ocean</a>  <a href="sides/aboutme.html">About me</a>  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>        // <---- für ein anderes Menue layout bei kleinerer Auflösung --->//  </div>

menubg1.png soll linksbündig sein, menu2.png soll die Mitte ausfüllen und sich responsive verhalten und menubg.png rechtsbündig im Menü-Hintergrund.

Freue mich über jede Hilfe

Die Box-Größe wurde über den Body definiert:

body
{
	max-height: 1300px;
    max-width: 1750px;
	margin: 0px auto;
}

Danke im Vorraus!