Bilder übereinaner anordnen im Header

[Matthias Scharwies]

Servus!

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.

Grundsätzlich geht das mit CSS:

1. Elternelement position:relative
2. Bilder absolut übereinander positionieren.

Nun meine Probleme mit dieser Vorgehensweise:

1. Ich bekomme die 3 Bilder nicht übereinander und habe komischerweise immer einen Versatz nach oben drin.

Bilder haben im Browser-Stylesheet einen Rand, den könntest Du mit margin:0entfernen

Aber …

Überlege, ob Du wirklich 3 Bilder benötigst.

1. Grundbild - Könnte das mit background-image als Hintergrund des header-Element eingefügt werden?

2. Den Schatten könntest Du mit text-shadow oder box-shadow realisieren.

3. Bleibt das Logo: Das könntest Du innerhalb eines a-Elements (als Backlink zu deiner Startseite) als img einfügen.

So hast Du nur ein Bild, das problemlos positioniert werden kann.

Herzliche Grüße

Matthias Scharwies