stimmt - das sehe ich jetzt erst - es sind ja 3 Blöcke.
Ich bin jetzt mit JavaScript nicht so fit - frage doch mal Klaus oder Werner.
Es müsste doch eigentlich möglich sein da z.B. die gesamte neue CSS für das IPhone direkt mit an das JavaScript für die zeitgesteuerten Bilder zu schreiben.
https://www.w3schools.com/js/js_htmldom_css.asp
Das hatte doch Werner auch ursprünglich so direkt da ran geschrieben - leider finde ich das bei mir nicht mehr.
... also diese CSS:
Code: Alles auswählen
div::before {
content: ' ';
display: block;
background-position: center;
background-size: cover;
height: 100vh;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: 0;
}
an das Skript unten bei "style" mit ran schreiben:
Code: Alles auswählen
<!-- Skript Wechselbilder -->
<script>
let heute = new Date();
let stunde = heute.getHours();
let bild = `images/nachts.jpg`;
if (stunde >= 22 && stunde <= 3) bild = `images/nachts.jpg`;
if (stunde >= 4 && stunde <= 9) bild = `images/morgens.jpg`;
if (stunde >= 10 && stunde <= 15) bild = `images/mittags.jpg`;
if (stunde >= 16 && stunde <= 21) bild = `images/abends.jpg`;
document.getElementById("bild").style = `background-image: url(${bild})`;
</script>
Code: Alles auswählen
<!-- Skript Wechselbilder -->
<script>
let heute = new Date();
let stunde = heute.getHours();
let bild = `images/nachts.jpg`;
if (stunde >= 22 && stunde <= 3) bild = `images/nachts.jpg`;
if (stunde >= 4 && stunde <= 9) bild = `images/morgens.jpg`;
if (stunde >= 10 && stunde <= 15) bild = `images/mittags.jpg`;
if (stunde >= 16 && stunde <= 21) bild = `images/abends.jpg`;
document.getElementById("bild").style = `
background-image: url(${bild});
content: ' ';
display: block;
background-position: center;
background-size: cover;
height: 100vh;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: 0;
`;
</script>
... und mein eigenes MP4-Hintergrundvideo hat auch den Test für das IPhone bestanden (Deine Seite habe ich jetzt nicht nochmals geprüft).