Bitte lest zunächst mein Tutorial zu den Wechselbildern auf meiner ersten Seite. Verwendet den dort angegebenen HTML-Code zur Darstellung des Blockinhaltes.
Meine hier angewendete CSS, die in den Bereich "CSS Editor" vom "Code Editor" des Blocks gehört. Wenn ihr auf der Arbeitsseite von Mobirise lieber ein Bild anzeigen wollt, was dann auch gleich all "Fallback-Image" funktioniert, dann schreibt doch die URL zu dem Bild hinein - anstelle von:background-color: black;
Entfernt hierzu am Code für das Background-Image diese Kommentar-Zeichen:
/* Kommentar Zeichen */
header {
position: relative;
background-color: black;
/* alternativ Background-Image */
/* background-image: url(https://www.mobirise-tutorials.com/Tutorials/images/sommer.jpg); */
height: 100vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header #bild {
position: fixed;
z-index: 0;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center center;
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.1;
z-index: 1;
}
Die fixierte Positionierung des Bildes eignet sich ausschließlich für den Header-Bereich, da das Bild ohne Positionsangabe immer ganz oben platziert wird. Für Inhalte an anderen Stellen auf der Seite sollte stattdessen eine absolute CSS-Positionierung verwendet werden, denn ein fixiert positioniertes Element wird relativ zum Ansichtsfenster oder zum Browserfenster selbst positioniert.
Unten das JavaScript für die vier Jahreszeiten, also:
Natürlich könntet ihr hier auch andere Zeiten oder auch weitere Zeiten eintragen.
Um ein besseres Verständnis der JavaScript-Operatoren zu erlangen, schaut euch bitte auch diese Seite von w3schools.com an.
Diese Bilder habe ich zuvor in ein von mir erstelltes Verzeichnis "images", in den Ordner meiner lokalen Publizierung und auf den Server kopiert. Die Bilder sind also erst nach der Publizierung zu sehen und nicht bereits auf der Arbeitsseite von Mobirise.
<!-- Skript Wechselbilder nach vier Jahreszeiten -->
<script>
let heute = new Date();
let tag = heute.getDate();
let monat = heute.getMonth() + 1; // Monate sind 0-basiert in JavaScript
let bild = `images/sommer.jpg`; // Standardbild für andere Daten
// Saisonale Bilder für Zeiträume
if ((monat === 3 && tag >= 21) || (monat > 3 && monat < 6) || (monat === 6 && tag < 21)) {
bild = `images/fruehling.jpg`;
}
else if ((monat === 6 && tag >= 21) || (monat > 6 && monat < 9) || (monat === 9 && tag < 23)) {
bild = `images/sommer.jpg`;
}
else if ((monat === 9 && tag >= 23) || (monat > 9 && monat < 12) || (monat === 12 && tag < 21)) {
bild = `images/herbst.jpg`;
}
else if ((monat === 12 && tag >= 21) || (monat === 1) || (monat === 2) || (monat === 3 && tag < 21)) {
bild = `images/winter.jpg`;
}
document.getElementById("bild").style = `background-image: url(${bild})`;
</script>
