Bilder übereinaner anordnen im Header

[sunshineh]

Hallo, ich möchte gerne 3 Bilder im Header überlagern. -Grundbild -Transparenter Schatten -Logo

Diese Bilder sollen immer bis zum Rand gehen - je nach Device.

Ich habe sie bis jetzt so in die html Seite eingefügt

<img id="imgheaderpicture" src="img/header/Header1.jpg">
 <img id="imgheadershadow" src="img/header/header-mask.png">
 <img id="imgheaderlogo" src="img/header/logo.png">

und z.B. diese Ergänzung im CSS-Code

#imgheadershadow {
  position: relative;
  margin-top: -100px;
  width: 100%;
  top: 0em;
  z-index: 2;
}

Nun meine Probleme mit dieser Vorgehensweise:

1. Ich bekomme die 3 Bilder nicht übereinander und habe komischerweise immer einen Versatz nach oben drin.
2. Je nach Breite des Devices wird der Rest der Seite vom Header überlagert oder es ist zuviel Platz zum Header hin.

Wie muss ich das machen, damit es - auch responsive - funktioniert?