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?

[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

[sunshineh]

Danke für deine schnelle Antwort.

Das mit der margin habe ich getestet, aber ich komme mit dem 2. und dem 3. Bild nicht bis an den Rand oben rauf. Also keine 100%ige Überlagerung (alle Bilder haben die Eigenschaft position: relative;

Der Schatten wird zur Mitte hin heller, hat also einen Farbverlauf und das radial und das kann - so wie ich es sehe - nicht einfach mit box-shadow realisieren.

[Matthias Scharwies]

Servus!

Danke für deine schnelle Antwort.

Das mit der margin habe ich getestet, aber ich komme mit dem 2. und dem 3. Bild nicht bis an den Rand oben rauf. Also keine 100%ige Überlagerung (alle Bilder haben die Eigenschaft position: relative;

Wenn Sie übereinander liegen sollen, müssen sie absolut positioniert werden, was aber auch wieder Nachteile mit sich bringt.

Mach's lieber als Hintergrundbild, die kannst du auch überlagern (multiple backgrounds).

Herzliche Grüße

Matthias Scharwies

[sunshineh]

Danke für deine Hilfe, hat geklappt!

Ich würde nun gerne - alle paar Sekunden das letzte "unterste" Hintergrundbild wechseln. https://www.mediaevent.de/css/background-image-mehrere.html Hier steht aber, dass dies nicht möglich ist, oder versteh ich das falsch?

Gibt es einen Trick, wie dies dennoch möglich ist?

[Matthias Scharwies]

Servus!

Danke für deine Hilfe, hat geklappt!

Schön!

Ich würde nun gerne - alle paar Sekunden das letzte "unterste" Hintergrundbild wechseln. https://www.mediaevent.de/css/background-image-mehrere.html Hier steht aber, dass dies nicht möglich ist, oder versteh ich das falsch?

Wieso - auf der Seite funktioniert es doch?

Du müsstest die einzelnen Bilder mit background-position verschieben, das ist aber kompliziert.

Gibt es einen Trick, wie dies dennoch möglich ist?

• CSS/Tutorials/Bildwechsler

Das beißt sich aber mit deinem Logo. Das solltest du räumlich getrennt machen (oder eben doch mit position: absolute.

Herzliche Grüße

Matthias Scharwies

[Felix Riesterer]

Liebe(r) sunshineh,

ich möchte gerne 3 Bilder im Header überlagern.

es geht also um Dekoration und nicht um echten Inhalt. Dann muss das mit Hintegrundbildern via CSS geregelt werden.

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

Mit passenden media queries.

Wenn Du dann noch einen Bildwechsler möchtest, dann solltest Du das mit einer Mischung aus JavaScript und CSS tun. Ich stelle mir das so vor, dass Du mit :after ein Pseudoelement verwendest, dessen Hintegrundbild und Transparenz Du mit JavaScript steuerst. Am besten über das Ändern von Klassennamen.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

Mit passenden media queries.

Der passende media query ist prefers-reduced-motion.

S.a. Eric Bailey: An Introduction to the Reduced Motion Media Query

LLAP 🖖