Wechselndes Hintergrundbild in HTML?

[Gunnar Bittersmann]

@@Milan

wie kann ich einen script in Html erstellen, sodass sich das Hintergrundbild ca alle 10 sekunden verändert.

Was heißt „sich verändert“? Gegen ein anderes ausgetauscht? Wieviele verschiedene Bilder? (*) Zwei drei? Noch mehr?

Ich habe das Hintergrundbild bisher im CSS definiert:

html{
	background: url(images/DSC_0601-01.JPG) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

Die Zeilen mit den Präfixen entsorgs du bitte rückstandslos wegen noch nie oder schon lang nicht mehr erforderlich.

Wäre nett wenn mir jemand helfen kann. Meine Javascript Kenntnisse sind leider nicht so gut.

Solche sind vielleicht gar nicht erforderlich; aber CSS-Kentnisse.^[1] Das sei auch allen Antwortenden gesagt, die mit JavaScript auf alles ballern und dabei unschuldige Kätzchen treffen.

Wenn die Antwort auf die oben gestellte Frage (*) „zwei“ ist, kann man diesen Bildwechler so anpassen, dass er statt mit img-Elementen mit ::before- und ::after-Pseudoelementen arbeitet. Sieht dann so aus.

Wenn die Antwort „drei“ ist, kann man ein Hintergrundbild fürs html-Element einbeziehen.

Bei „noch mehr“ (möglicherweise auch bei zweien oder dreien) könnte man einen Bildwechsler wie den obigen ins Markup einbinden und in den Hintergrund legen (position: fixed; z-index: -1). Sind die Bilder denn schmückendes Beiwerk oder doch Inhalt?

Ist der Bildwechsel wirklich eine gute Idee oder lenkt das die Nutzer vom Inhalt ab?

LLAP 🖖

---

1. und Orthographie-Kenntnisse ↩︎