CSS 3: Zufällige CSS Hintergründe

von Deniz Cetin (Kommentare: 0)

Beispiel für ein JSFiddle!
Beispiel für ein JSFiddle!

Es gibt Fälle, bei denen man zufällige Hintergründe auf einer Website haben möchte. Für mehr Abwechslung? Für unterschiedliche Grafiken? Mit etwas Javascript- und jQuery-Magie schafft man das ganz schnell und einfach.

Lösung und Beispiel

Hierfür haben wir ein kleines Javascript geschrieben. In unserem Beispiel soll eines von vier Zufallsbildern mit den Namen zufallsbild-1.png, zufallsbild-2.png, zufallsbild-3.png und zufallsbild-4.png jedem Element mit der CSS-Klasse zufallsbild zugeordnet werden.

1 <script>
2 	var images = ['zufallsbild-1.png', 'zufallsbild-2.png', 'zufallsbild-3.png', 'zufallsbild-4.png'];
3 	$('.zufallsbild').css({'background-image': 'url(files/sys/img/' + images[Math.floor(Math.random() * images.length)] + ')'});
4 </script>

Was passiert hier also? In Zeile 2 definieren wir ein sogenanntes Array, in dem wir die Namen der Bilddateien definieren, die nachher benutzt werden sollen. Im nächsten Schritt wird der Klasse zufallsbild per CSS-Befehl 'background-image' eins dieser Bilder aus dem Ordner 'files/sys/img' entnommen, die dort abgelegt sind.

Fertig!

In Contao 4 nutzen

In Contao 4 kann man dieses Script dann bei aktiviertem jQuery dann einfach unter Themes > Seitenlayouts > IHR_LAYOUT > "Eigener JavaScript-Code" einfügen. Ein funktionierendes Beispiel kann man rechts oder hier darunter dem JSFiddle entnehmen. Bei jedem Klick auf Result sollte ein anderes Hintergrundbild auftauchen!

Fertig. Bei Fragen oder anderen Sonderfällen einfach ein Kommentar hinterlassen!

Zurück

Einen Kommentar schreiben

Bitte rechnen Sie 8 plus 5.