Slider als Header-Background

Am besten mit einer Erweiterung, wie z.B.

Slideshow CK for Joomla

An easy to use image slideshow that you can use on your Joomla website

www.joomlack.fr

oder

Smart Slider 3 - Free Joomla Plugin

Power your Joomla site with the best free slider extension. Ready to take the advantage of the most powerful Joomla slider?

smartslider3.com

es gibt bestimmt noch mehr. Kommt drauf an, was du genau brauchst.

Hallo mamboo_xc,

dafür gibt es in Cassiopeia leider keine eingebaute Funktion, die Template-Optionen erlauben nur ein einzelnes statisches Header-Bild, keine Slideshow. Mit etwas CSS lässt sich das aber ganz ohne zusätzliche Erweiterung umsetzen, mit einer reinen CSS-Überblendung, ohne JavaScript.

Bevor du loslegst: Leg dir unbedingt ein Cassiopeia-Child-Template an (Erweiterungen > Templates > Neu > Kind Template), falls noch nicht geschehen. Sonst sind deine Anpassungen beim nächsten Joomla-Update wieder weg.

Im Kind-Template ergänzt du in der index.php, direkt nach dem öffnenden <header> Tag, folgenden Block:

html

<div class="header-slideshow">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Diese vier leeren divs bekommen ihr Bild allein über CSS, kein Bild-Tag nötig. Dafür in deine Template-CSS folgendes:

css

.header {
position: relative;
overflow: hidden;
}

.header-slideshow {
position: absolute;
inset: 0;
z-index: 0;
}

.header-slideshow div {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
animation: headerFade 16s infinite;
}

.header-slideshow div:nth-child(1) { background-image: url(../images/slide1.jpg); animation-delay: 0s; }
.header-slideshow div:nth-child(2) { background-image: url(../images/slide2.jpg); animation-delay: 4s; }
.header-slideshow div:nth-child(3) { background-image: url(../images/slide3.jpg); animation-delay: 8s; }
.header-slideshow div:nth-child(4) { background-image: url(../images/slide4.jpg); animation-delay: 12s; }

@keyframes headerFade {
0%   { opacity: 0; }
5%   { opacity: 1; }
25%  { opacity: 1; }
30%  { opacity: 0; }
100% { opacity: 0; }
}

.header .logo, .header .container {position: relative;   z-index: 1;}

Das Prinzip: Alle vier Bilder liegen übereinander und sind standardmäßig unsichtbar (opacity 0). Über die Animation und die versetzten animation-delay Werte blendet sich immer nur eines nach dem anderen ein und wieder aus, bei vier Bildern und 16 Sekunden Gesamtdauer läuft jedes Bild also 4 Sekunden lang sichtbar durch. Möchtest du mehr oder weniger Bilder, musst du sowohl die Anzahl der divs als auch die Gesamtdauer der Animation (die 16s) und die animation-delay Werte entsprechend anpassen, bei 3 Bildern zum Beispiel 12s Gesamtdauer mit Delays von 0s, 4s, 8s.

Wichtig ist der letzte Block: Er sorgt dafür, dass dein Logo und der übrige Header-Inhalt über der Slideshow liegen, nicht dahinter, das erledigt das höhere z-index.

Die Bildpfade musst du natürlich noch an deinen tatsächlichen Speicherort anpassen, am einfachsten legst du die Bilder direkt im images-Ordner deines Kind-Templates ab.

Vielleicht noch als HInweis:

- Der offizielle Support für Joomla 4 ist im Oktober 2025 ausgelaufen. Bekommt also Sicherheitsupdates mehr.

- Das gleiche gilt für PHP 8.1. Hier ist der Support im Januar 2026 abgelaufen.

Ich würde vielleicht zuerst die Seite zur aktuellen J5-Version updaten und dann zu J6.

Nutze dafür dann PHP 8.3/8.4

Migrationsleitfaden findest du hier:

Thema

Update/Migration von (veralteten) Joomla-Versionen

Wenn ihr alte Joomla-Versionen updaten/migrieren wollt, findet ihr hier die aktuellsten Anleitungen dazu:

https://guide.joomla.org/user-manual/migration

Elwood

23. März 2026 um 17:21

Gern geschehen, viel Erfolg beim Ausprobieren! Und nur um es nochmal einzuordnen: Der Vorschlag von Dr. Menzel mit Slideshow CK oder Smart Slider 3 ist genauso ein guter Weg, gerade wenn du später noch mehr Slider-Funktionen brauchst, Übergangseffekte, Touch-Steuerung auf Mobilgeräten oder eine Verwaltung der Bilder direkt im Backend ohne Codezugriff. Meine CSS-Lösung ist eher die schlanke Variante ohne zusätzliche Abhängigkeit, wenn du nur genau dieses eine Feature brauchst und nicht ständig warten möchtest. Am Ende hängt es davon ab, wie oft sich die Bilder ändern sollen und ob du dich mit Kind-Templates wohlfühlst, beide Wege führen zum Ziel.

Ich finde man sollte ausser Hilfe zum Update hier keine veraltete Joomla Version mehr supporten. So wird das ganze nur weiter unterstützt ohne über die Konsequenzen für Besucher veralteter Seiten zu denken.

Zitat von WM-Loose

Ich finde man sollte ausser Hilfe zum Update hier keine veraltete Joomla Version mehr supporten. So wird das ganze nur weiter unterstützt ohne über die Konsequenzen für Besucher veralteter Seiten zu denken.

Das wäre ein Thema für die Administratoren des Forums und sollte vielleicht öffentlich diskutiert werden

Zitat

Ich finde man sollte ausser Hilfe zum Update hier keine veraltete Joomla Version mehr supporten. So wird das ganze nur weiter unterstützt ohne über die Konsequenzen für Besucher veralteter Seiten zu denken.

Es gibt eine ForenRegel: Wer eine Frage nicht beantworten will, schreibt einfach nichts.
Ansonsten sind es in diesem Fall gute Antworten, die in allen Joomla Versionen gelten und hilfreich sind.

Zitat

Das wäre ein Thema für die Administratoren des Forums und sollte vielleicht öffentlich diskutiert werden

Ich finde es ok, auf veraltete Versionen hinzuweisen, das ist auch Support und die Fragesteller sind sich dessen nicht immer bewusst. Rolf Dautrich was wäre dein Vorschlag für die Administratoren?

firstlady Man könnte das Thema aus meiner Sicht ergebnisoffen zur Diskussion stellen.

Persönlich halte ich es schon für sinnvoll, sanften Druck auf beharrliche Update-Verweigerer auszuüben. Doch es mag im Einzelfall auch gute Gründe dafür geben, bei einer veralteten Version zu bleiben; diese sollten vom Supportsuchenden dann auch genannt werden. Eine pauschale Support-Verweigerung halte ich für nicht verhältnismäßig.

Hallo Ursina,

deine Begründung für den J4-Stand ist absolut nachvollziehbar, so eine schrittweise Migration mit komplettem Template-Wechsel ist ohnehin schon genug Arbeit auf einmal, das würde ich genauso angehen.

Zu deiner Frage: Du liegst richtig, Slideshow CK und Smart Slider 3 sind beides eigenständige Content-Elemente, die als Modul in einer Modulposition oder per Plugin in einem Beitrag erscheinen, nicht als Hintergrundebene hinter anderen Inhalten gedacht. Out of the box legt sich so ein Slider also nicht automatisch hinter deinen Header mit dem Logo obendrüber, er würde stattdessen als eigener, sichtbarer Block irgendwo auf der Seite erscheinen.

Um so eine Erweiterung trotzdem als Hintergrund zu nutzen, müsstest du das Slider-Modul einer Position zuweisen, die im oder direkt am Header liegt, und dann mit im Prinzip derselben CSS-Technik arbeiten, die ich oben skizziert habe: position absolute, passendes z-index, damit Logo und übriger Header-Inhalt sichtbar obenauf bleiben. Das heißt, du sparst dir mit der Erweiterung zwar das manuelle Bauen der Bildwechsel-Logik, brauchst aber trotzdem eigenes CSS für die Positionierung, der komplette Vorteil einer reinen No-Code-Lösung geht also für genau diesen Anwendungsfall verloren.

Für dein konkretes Ziel, Slideshow als Hintergrund mit Logo davor, würde ich dir daher eher zur reinen CSS-Lösung raten, die ich oben gepostet habe. Eine Erweiterung wie Smart Slider 3 lohnt sich meiner Einschätzung nach eher, wenn du zusätzlich zur Hintergrund-Idee noch einen "richtigen" Slider mit Klick-Interaktion, Text-Overlays oder Navigationspfeilen an einer anderen Stelle der Seite einsetzen möchtest, für einen reinen Hintergrundeffekt ist sie fast schon zu viel Werkzeug.

Der TE hat erst in #11 die Sache erklärt. Die Rubrik Joomla 4 ist in anderen Foren schon lange gesperrt und es gibt nur noch Migration oder Update, daher mein Einwand aber ist mir ehrlich gesagt mittlerweile auch egal.

Zitat

Die Rubrik Joomla 4 ist in anderen Foren schon lange gesperrt

In welchen Foren?

Aber danke für die Anregung - Wir haben bei den älteren Foren das End of Life Datum dazugesetzt, wie im englischen forum.joomla.org.

Zitat von firstlady

In welchen Foren?

Joomlaplates.

Dort nur noch Thema J5 oder J6 wo auch Migrationsfragen beantwortet werden. Bezieht sich aber vorwiegend auf Astroid und Templates.