in Html/Css etwas zeitabhängig darstellen.
Hallo Leute. Ich wollte mal ausprobieren, den Hintergrund einer website Tageszeitabhängig zu verändern. Also wenn Tag ist ist es ein Bild vom Restaurant bei Tag bei Nacht eben eine Nachaufnahme.
Jetzt habe ich ein div, in dem eigentlich der ganze content usw drinnen ist. Dieses div hat als Hintergrundbild eben den background a ( Tag )
allerdings wüsste ich nicht wie ich das hinbekommen sollte, dass es dann automatisch wechselt.
Es wäre echt super wenn da jemand eine Lösung hätte.
Mfg. Justin.
5 Antworten
Also es gäbe da spontan zwei einfache Möglichkeiten, je nachdem was du haben möchtest.
In jedem Fall brauchst du für dein Div am besten 2 verschiedene Klassen oder IDs. Also z.B.:
#ContentDay {
background:url("images/day.jpg"); /* + Noch Einstellungen für Repeat usw. */
}
#ContentNight{
background:url("images/night.jpg");
}
Wenn sich die Seite je nach Uhrzeit des Benutzers (Also Clientseitig) ändern soll, wäre deine Lösung JavaScript. Du liest die aktuelle Zeit per js aus und gibst dann deinem Div die ID "ContentDay oder ContentNight".
Wenn du die Uhrzeit nehmen möchtest, die aktuell auf dem Server herrscht, benötigst du PHP, auch hier kannst du mit einer Funktion (http://php.net/manual/de/function.time.php) die Zeit auslesen und dementsprechend dann z.B. per echo die entsprechende ID ausgeben.
Danke für den Hinweis, ich habe natürlich ganz vergessen, dass JS ein Element über die ID anspricht. Leider kann ich meinen Post oben nicht mehr editieren.
Beispielkorrektur für oben:
CSS:
#Content {
/* Content Eigenschaften */
}
.bgDay {
background:url("images/day.jpg");
}
.bgNight {
background:url("images/night.jpg");
}
HTML:
<div id="Content" class="bgDay"></div>
Das man auch direkt die CSS über JS manipulieren kann ist richtig, ich mag es aber eher über "className = 'xyzClass';"
Ist vielleicht Geschmackssache, aber so kann er das Beispiel auch direkt in PHP umsetzen.
Bei den IDs stimme ich dir zu, aber Klassen darf man sehr wohl mehrere für ein Element vergeben.
Beispiel:
<div class="Box BlackBorder"></div>
Das funktioniert nur mit javascript oder php (bei php bin ich mir nicht ganz sicher, aber müsste auch gehen!)..
Nur mit html/css funktioniert es auf jede Fälle nicht, da du die Systemzeit des jeweiligen User der Seite brauchst!
MfG CarolaA.
rein mit HTML / CSS wird das nicht funktionieren.
entweder nutzt du dafür Clientseitig Javascript oder Serverseitig PHP
Da brauchst Du ein bisschen JavaScript. Uhrzeit auslesen und abhängig davon die Klasse für das Hintergrundbild setzen.
Hier ein Beispiel, Du findest sicher noch viele weitere wenn Du danach googelst ;-) http://stackoverflow.com/questions/4358155/changing-background-based-on-time-of-day-using-javascript
Alles nur das nicht. Erst einmal dürfen weder zwei IDs oder Klassen für ein Element vergeben werden und zweitens völlig unnötig. Client-seitig, also mit JS das Elements wählen und CSS »manipulieren«. Sprich mit JS Backgroundimage austauschen.