Zufälliges Hintergrundbild anzeigen über CSS
TaiBull
- css
0 Steel0 TaiBull0 Gunnar Bittersmann0 suit0 TaiBull0 Gunnar Bittersmann0 suit
0 Jeena Paradies
0 Encoder
Hallo liebe SELFHTMLer!
Ich würde gern auf einer Website per Zufal bestimmte Hintergrundbilder aus einem Pool anzeigen laßen. Das Ganze würde ich gern über CSS machen.
Wer hat dafür einen Tip für mich?
Moinsen!
Ich würde gern auf einer Website per Zufal bestimmte Hintergrundbilder aus einem Pool anzeigen laßen. Das Ganze würde ich gern über CSS machen.
Wer hat dafür einen Tip für mich?
Hm. Das geht schon. CSS ist aber nicht grad dynamisch. Es gibt verschiedene Moeglichkeiten:
Du kannst serverseitig das CSS generieren und dort das Hintergrundbild zufaellig einfuegen. (waere wohl meine Wahl)
Du kannst verschiedene Klassen im CSS definieren, die verschiedene Hintergruende enthalten und die Klassen dann zufaellig zuweisen (Serverseitig oder per Javascript)
Du kannst auch direkt auf Javascript zugreifen und darueber die Angaben zum Hintergrundbild machen.
- Du kannst serverseitig das CSS generieren und dort das Hintergrundbild zufaellig einfuegen. (waere wohl meine Wahl)
»»
Okay hört sich gut an und wie würdest du das genau umsetzen?
@@TaiBull:
nuqneH
- Du kannst serverseitig das CSS generieren und dort das Hintergrundbild zufaellig einfuegen. (waere wohl meine Wahl)
Okay hört sich gut an und wie würdest du das genau umsetzen?
(1) Array anlegen mit den Dateinamen der n Bilder.
(2) Zufallszahl aus dem Bereich 0 bis n − 1 (erlaubte Indizes) ermitteln
(3) Code mit dem ermittelten Arrayelement generieren
Qapla'
(2) Zufallszahl aus dem Bereich 0 bis n − 1 (erlaubte Indizes) ermitteln
Array durchmischen und alles bis auf das 1. Element verwerfen bzw. nur das erste Element ausgeben. In PHP geht das z.B. mit shuffle().
(2) Zufallszahl aus dem Bereich 0 bis n − 1 (erlaubte Indizes) ermitteln
Array durchmischen und alles bis auf das 1. Element verwerfen bzw. nur das erste Element ausgeben. In PHP geht das z.B. mit shuffle().
Sorry jetzt bin ich etwas überfordert, mit PHP bin ich leider noch nicht vertraut, ich spreche nur HTML und CSS ;-)
@@TaiBull:
nuqneH
Sorry jetzt bin ich etwas überfordert, mit PHP bin ich leider noch nicht vertraut, ich spreche nur HTML und CSS ;-)
Das macht nichts. Dann setzt du dein Vorhaben eben etwas später um – wenn du mit PHP etwas vertrauter geworden bist. ;-)
BTW, bis auf den Zufall ist dein Problem eng verwandt mit diesem.
Qapla'
So jetzt habe ich es doch versucht über JS zu lösen, in dem Beispiel habe ich 3 Hintergrundbilder eingestellt:
<script type="text/javascript">
var zufall = Math.round(2 * Math.random()) + 1;
document.write('<body style="background: URL(img/bg' + zufall + '.jpg) red;">')
</script>
vom Prinzip funkioniert es wunderbar, beim refreshen der Seite wechselt das Hintergrundbild. Das Bild streckt sich über den ganzen Anzeigebereich, nur mein Haupt-DIV in dem alle Inhalte stecken wird nicht überdeckt.
Nur wollte ich nicht, daß das Bild sich über den ganzen Anzeigebereich streckt sondern sich nur als Hintergrundbild in meinem Haupt-DIV ausbreitet.
Wer kann mir auf die Sprünge helfen?
[latex]Mae govannen![/latex]
So jetzt habe ich es doch versucht über JS zu lösen, in dem Beispiel habe ich 3 Hintergrundbilder eingestellt:
<script type="text/javascript">
var zufall = Math.round(2 * Math.random()) + 1;
Nur wollte ich nicht, daß das Bild sich über den ganzen Anzeigebereich streckt sondern sich nur als Hintergrundbild in meinem Haupt-DIV ausbreitet.
dann ermittele die Referenz zu diesem div, sobald die Seite geladen ist und setze die entsprechende Eigenschaft
Stur lächeln und winken, Männer!
Kai
dann ermittele die Referenz zu diesem div, sobald die Seite geladen ist und setze die entsprechende Eigenschaft
»»
Da kann ich jetzt nicht ganz folgen als JS-Anfänger, bräuchte bitte eine Hilfestellung.
So die Nacht hab ich kaum geschlafen, dafür hab ich aber wieder etwas dazu gelernt und mein Problem fast alleine gelöst :-)
Das Hintergrundbild wird jetzt zufällig angezeigt und ist auch so ausgerichtet wie ich es haben wollte...zumindest im IE.
Jetzt habe ich aber das Problem, daß im Firefox das Hintergrundbild auf einer Unterseite ca 205px tiefer angezeigt wird.
Ich habe jetzt eine gefühlte Ewigkeit versucht das Problem ausfindig zu machen aber finde einfach nichts!
Moin!
So die Nacht hab ich kaum geschlafen, dafür hab ich aber wieder etwas dazu gelernt und mein Problem fast alleine gelöst :-)
Subba!
Das Hintergrundbild wird jetzt zufällig angezeigt und ist auch so ausgerichtet wie ich es haben wollte...zumindest im IE.
Jetzt habe ich aber das Problem, daß im Firefox das Hintergrundbild auf einer Unterseite ca 205px tiefer angezeigt wird.
Spontan würd ich sagen du hast was falsch gemacht und der IE zeigts falsch an, weil er im Quirks Mode is.
Hast Du ein Online Beispiel?
Hast Du ein Online Beispiel?
Ja hier findest du mein "Meisterwerk":
http://eier-salat.de/space4friends/www
Ich bin auch davon überzeugt einen Fehler gemacht zu haben, nur wo und welchen frag ich mich schon den ganzen Tag ^^
Moin!
Du gibst der Hintergrundgrafik eine Position. Nimm da mal die vertikale Angabe raus.
Soll das Design so sein? Also soll auf der betreffenden Seite der Grüne Block über dem Header liegen? Warum floatet content left?
Moin!
Du gibst der Hintergrundgrafik eine Position. Nimm da mal die vertikale Angabe raus.
Ah okay jetzt haut es auch hin, da hab ich den Wald vor lauter Bäumen nicht gesehen.
Soll das Design so sein? Also soll auf der betreffenden Seite der Grüne Block über dem Header liegen?
Über dem grauen Balken in dem Wanderwege steht oder was meinst du in dem Fall mit Header? Falls du den grauen Balken meinst verrate mir doch bitte welchen Browser du nutzt, den bei mir (im IE8 und FF 6.0.2) tritt dies erst auf seid ich das float left aus dem content gelöscht habe.
»»Warum floatet content left?
Ich hab das float mal weg gemacht damit man sieht was ohne passiert:
1. auf der Index reisst das "Über Willy" nach rechts aus
2. auf der Seite Wanderwege bricht der grüne Hintergrund ca. 2-3 Pixel noch oben durch und steht über dem grauen Balken in dem "Wanderwege" steht
Moin!
Über dem grauen Balken in dem Wanderwege steht oder was meinst du in dem Fall mit Header? Falls du den grauen Balken meinst verrate mir doch bitte welchen Browser du nutzt, den bei mir (im IE8 und FF 6.0.2) tritt dies erst auf seid ich das float left aus dem content gelöscht habe.
Mit Header meinte ich die Grafik, die Du zufällig einfügst. Ich war mir nicht sicher, ob das ein Header sein sollte.
»»Warum floatet content left?
Ich hab das float mal weg gemacht damit man sieht was ohne passiert:
- auf der Index reisst das "Über Willy" nach rechts aus
- auf der Seite Wanderwege bricht der grüne Hintergrund ca. 2-3 Pixel noch oben durch und steht über dem grauen Balken in dem "Wanderwege" steht
Jau. Das liegt an dem ganzen überflüssigen gefloate davor. Damit kommen wir zum Rest deines Codes. Weiß gar nicht, warum sich noch niemand beschwert hat. Ich erwähnte ja bereits, daß Du ein paar Baustellen hast, die wichtiger sind, als eine Funktion die 3 Zahlen exakt gleichverteilt generiert.
Da wo Du ein float sinnvoll nutzen könntest, mißbrauchst Du Tabellen für Design. Bisher setzt Du float so ein, daß es eigentlich mehr Probleme macht, als es scheint. Mit Float nimmst Du nämlich die Elemente aus dem Fluß heraus. Das Elternelement passt plötzlich nicht mehr und die gefloateten Elemente verdrängen nachfolgende, was Du wieder mit flaot reparierst. NAtürlich kannst Du die Navigation per Float erstellen, aber dann musst Du auch dafür sorgen, daß sie in ihrem Container bleibt.
Ich könnte jetzt auch damit anfangen Dir zu predigen, daß Du eine Liste nehmen solltest in die Du deine Links einfügst. (statt eines Divs) und diese Dann formatierst, damit Du deine horizontale Navigation bekommst. Merk Dir das einfach mal für später.
Aber als erstes möchte ich, daß Du dir mal display:inline-block anschaust. Schmeiß also bitte alle floats raus aus deinem CSS. Ich sehe nichts was float unbedingt benötigt. Klar. Die Links sind dann wieder Inlineelemente die sich nicht mit width und height ordentlich formatieren lassen. Deshalb setze display vernünftig ein. Ein inline-block Element verhält sich wie ein inline Element, bricht also nicht einfach um, ist aber trotzdem ein Block, dessen Größe man definieren kann.
Moin!
<script type="text/javascript">
var zufall = Math.round(2 * Math.random()) + 1;
document.write('<body style="background: URL(img/bg' + zufall + '.jpg) red;">')
</script>
Okay. Wo steht das? Damit erstellst Du einen body mit Hintergrundbild. Also hast du sowas?
<html>
<head>
<head>
<script>document.write</script>
</body>
</html>
vom Prinzip funkioniert es wunderbar, beim refreshen der Seite wechselt das Hintergrundbild. Das Bild streckt sich über den ganzen Anzeigebereich, nur mein Haupt-DIV in dem alle Inhalte stecken wird nicht überdeckt.
Ok. Wie zu erwarten, hast Du ein Hintergrundbild in Deiner Seite. hasts ja auch in den Body übernommen. Was heisst aber 'mein Haupt Div wird nciht überdeckt.'? Hintergrundbilder sollen doch auch nichts überdecken?
Nur wollte ich nicht, daß das Bild sich über den ganzen Anzeigebereich streckt sondern sich nur als Hintergrundbild in meinem Haupt-DIV ausbreitet.
Meinst Du dass dein div ne Hintergrundeigenschaft hat, die es nciht transparent lassen? Dann ist dort natürlich nichts von einem Hintergrundbild im body zu sehen.
Wenn Du das Hintergrundbild nur im Div willst, solltest Du es auch diesem div zuweisen.
Wer kann mir auf die Sprünge helfen?
Hab ich hoffentlich grad.
Was Kai345 meinte:
Deine Randomfunktion ist nicht ganz perfekt. Uninteressant für dich. Was du gebaut hast reicht völlig. Für nen Anfänger gut.
Du sollst mit JS dein div refenrenzieren (ein objekt erstellen das dieses div präsentiert). Zum Beispiel indem du ihm eine ID gibst (<div id='content'></div>) und über diese einen Bezug herstellst (mit einer ID per document.getElementById(id))
Das mit dem JS sollst Du am Besten nach dem Laden machen, also wenn alles auch da ist. (indem du das Sript am Ende der Seite notiertst oder einen entsprechenden Eventhandler benutzt (onload))
Und wenn du also einen Bezug auf das Element hast die entsprechenden style Eigenschaften setzen. (uber die style Eigenschaft des Objekts)
Die nötigen informationen hat er verlinkt.
Jetzt versuch aber erstmal meine Antworten umzusetzen und wenn es läuft hilft es dir vieleliacht auch mehr von der ganzen Scahe zu verstehen und dann mal Kais Vorschläge umzusetzen.
@@Steel:
nuqneH
Was Kai345 meinte:
Deine Randomfunktion ist nicht ganz perfekt. Uninteressant für dich. Was du gebaut hast reicht völlig. Für nen Anfänger gut.
Was soll der Unsinn?
„Wir wissen zwar, dass du Mist baust, sagen dir das aber nicht, weil dein Mist für dich völlig ausreicht und du ja doch nichts richtig Gutes brauchst?“
Ist das wirklich deine Meinung?
Qapla'
Hoi!
Was soll der Unsinn?
„Wir wissen zwar, dass du Mist baust, sagen dir das aber nicht, weil dein Mist für dich völlig ausreicht und du ja doch nichts richtig Gutes brauchst?“
Ist das wirklich deine Meinung?
'Du hast nen Fiat Panda gabaut der 15 l frisst, du könntest auch einen Porsche bauen, der nur 5 l schluckt, aber darum kümmern wir uns wenn du die Strasse fertig hast. Solange kannst Du auch den Panda fahren.' Ja. Das ist meine Meinung. Es hat vier Räder und es fährt. Das soll erstmal reichen. Da sind ganz andere Baustellen, die wichtiger sind.
[latex]Mae govannen![/latex]
Und in ein paar Wochen haben wir hier den Thread "Manche Hintergrundbilder werden viel seltener angezeigt als andere".
Zumal im Prinzip nur eine Zeile Code aus dem verlinkten Artikel kopiert und die Werte angepasst werden müßten.
Stur lächeln und winken, Männer!
Kai
[latex]Mae govannen![/latex]
Und in ein paar Wochen haben wir hier den Thread "Manche Hintergrundbilder werden viel seltener angezeigt als andere".
Glaub ich nicht: Das merkt keine Sau. Aber wenn das dann wirklich das akuteste Problem sein sollte, kann man sich auch darum kümmern. Man kann natürlich einen absoluten Anfänger sofort mit allem möglichen Kram zumüllen, so daß er darin absäuft.
Wir reden hier davon, 3 verschiedene Grafiken darzustellen. Ich wage zu bezweifeln das die Funktion der Webseite davon abhängt ob Grafik 1 und 3 seltener dargestellt werden als 2.
Da kommt mir wieder etwas in den Sinn: Genau dieses Beispiel ist wunderbar. Ich wage zu bezweifeln, daß da wo ich arbeite, irgendjemand spontan verstünde, was euer Problem ist. Es werden schliesslich alle gewünschten Zahlen zufällig generiert. Fast immer, wenn ich beginne, etwas mal ordentlich zu machen werde ich aufgefordert das zu lassen, weil es meist zeitaufwändiger ist. Ein Klasse schreiben, statt einfach Code zu schreiben, zu kopieren und anzupassen dauert viel länger. Und ich werde den Teufel tun, den ganzen Codemüll, den ich bekomme, zu verbessern. Es läuft. Also ist es gut. Es gibt nämlich wesentlich schlimmere Baustellen.
Ein Beispiel: Wir wussten nicht, daß niemand auf der Welt mit einigen unserer Webanwendungen in der Lage war, Daten in Excel zu exportieren, wenn er keinen englisch eingerichteten PC hatte. Unsere sind immer englisch eingerichtet, weshalb wir keine Probleme hatten. Bis eines Tages ein Franzose fragte, warum das nicht mehr ging. Es handelt sich dabei um zwei unternehmensweite Anwendungen, die von Corporate (USA) erstellt wurden - von einer Abteilung Programmierer. Ich bin offiziell kein Programmierer und nur einfacher Clerk, mit dem geringstmöglichem Gehalt und entsprechend wenig Strom um irgendwas zu bewirken.
Wir sind nun davon ausgegangen, daß es mal wieder ein Update gab wobei die Exportfunktionen kaputtgemacht wurden. Kurz geprüft: Komisch geht doch? Also haben wir nachgefragt und dabei etwas cooles rausgefunden: Seit Jahren geht das nicht. Seit Jahren stellen Kollegen ihre PCs auf englisch ein, loggen sich neu ein, laden die Daten, stellen wieder auf Ihre Sprache zurück, loggen sich wieder aus und ein um dann die Daten zu bearbeiten. Falls sie überhaupt soweit kamen und die Daten nicht anderweitig bezogen. Also hab ich mir das mal angeschaut. Und voila! Man hätte das natürlich lösen können, indem man die Daten als CSV oder XML ausliefert. Aber man hat sich dazu entschieden eine Excelinstanz zu erstellen und die Daten direkt per Script dort einzufügen. Bei der Referenz auf das zu bearbeitende Excelsheet gab man den Namen an: 'Sheet1' Tja. Völlig unerwartet gibt es aber kein 'sheet1' in einem deutschen oder französischem, ... Excel. Hier in D heisst es, total überraschend 'Tabelle1'. Also gibts einen Fehler.
Ich hab am Script geschraubt und es lief. Also hab ich mir meinen Chef geschnappt, ihm das erklärt und er (Amerikaner) ruft mal eben drüben an. Wir haben denen per Mail den korrekten Code (mit Referenzen über die Blattnummer und nicht den Namen) geschickt. Antwort: Was wollt ihr da eigentlich? Lasst uns in Ruhe, sowas kann man nicht eben ändern. Ihr wisst doch sowieso nicht was ihr da sagt. Es lief doch eh immer.
Ne gute Woche später gab es eine kleine Notiz auf den Startseiten der betroffenen Applikationen, dass an der Exportfunktion geaerbeitet wurde.
Hab ich schonmal von dem Login erzählt, bei dem man seine Active Directory Daten nutzen muss, das aber ein Passwortfeld von nur 10 Stellen hat? Mein Kollege hat ein Passwort mit 16 oder 18 Stellen und durch die Sternchen auch nicht gemerkt, daß er schon lange nix mehr eingibt. Da er sich nicht einloggen konnte, hab ich mir das mal angeschaut und war doch leicht irritiert. Er kann es nicht (obwohl ich es ihm gezeigt hab) und ich hab nicht immer die Zeit sein Passwortfeld zu erweitern. Das Problem besteht, soweit ich weiß, immer noch.
Meine Frage also: Arbeitet ihr wirklich in solchen klinisch sauberen und perfekten Umgebungen, daß ihr jeden Krümel Code nach hochgeschraubten ethischen Grundlagen schreibt? Gibt es Arbeitgeber wo sowas geht? Meist muss die Bude auf Rädern für die Fahrt doch reichen? In meiner Welt muss man erstmal mit dem geschlampten Scheiss anderer fertig werden, bevor man anfängt sich um das perfekte Programm zu kümmern. Und es reicht, solange 3 Bilder angezeigt werden. Es soll sogar nicht mehr gemacht werden.
[latex]Mae govannen![/latex]
Und in ein paar Wochen haben wir hier den Thread "Manche Hintergrundbilder werden viel seltener angezeigt als andere".
Glaub ich nicht: Das merkt keine Sau. Aber wenn das dann wirklich das akuteste Problem sein sollte, kann man sich auch darum kümmern. Man kann natürlich einen absoluten Anfänger sofort mit allem möglichen Kram zumüllen, so daß er darin absäuft.
Wir reden hier davon, 3 verschiedene Grafiken darzustellen. Ich wage zu bezweifeln das die Funktion der Webseite davon abhängt ob Grafik 1 und 3 seltener dargestellt werden als 2.
Und beim nächsten Fall, in dem er Zufallszahlen benötigt, schaut er in diesem Javascript nach und kopiert diese falsche Version dann wieder.
Deine Argumentation ist irgendwie nicht sehr sinnvoll, das ist so als würdest du sagen: Du bist Anfänger, schreib erst mal irgendein HTML, der Doctype und die richtige Element-Verschachtelung sind erst mal nicht wichtig, der Text wird ja schließlich auch ohne angezeigt.
Stur lächeln und winken, Männer!
Kai
Moin!
Nein. Wir haben hier ein Schiff. das leckt und Schlagseite hat. Da klopft man erstmal die groesseren Lecks zu und macht es soweit erstmal wieder seetuechtig. Wenn das Ding dann sicher im Hafenist, kommts aufs Trockendock.
In der Grundschule lernt man auch erstmal, dass 10-12 nicht geht.
Ihr habt aber wahrscheinlich bei jeder Sache die Ihr gelernt habt, das Noobstadium uebersprungen und sofort in den Expertenmodus geschaltet. Dann habe ich eine Nachricht fuer euch: Viele Leute sind schon damit ueberfordert ihre Korrekte ID und Passwort anzugeben wenn man sie danach fragt. Man kann nicht erwarten dass jeder sofort loslegt und es ist ueberhaupt nicht noetig, bestimmte Fehler zu korrigieren. Im Programmieren 101 ist diese einfache Funktion zum Erstellen von Zufallszahlen ausreichend. Der Durchschnitts-Hobbyprogrammierer wird niemals etwas besseres benoetigen. Sollte ihm mal auffallen dass das nicht der Fall ist, ist das ein sicheres Zeichen dafuer, dass er den Bereich der Durchschnittlichkeit verlaesst. Und dann erklaere ich ihm auch gerne wies anders geht.
@@Steel:
nuqneH
Nein. Wir haben hier ein Schiff. das leckt und Schlagseite hat. Da klopft man erstmal die groesseren Lecks zu und macht es soweit erstmal wieder seetuechtig.
Du willst das Loch schließen, aber das Schiff mit Schlagseite auf die Reise schicken.
(Der Begriff „Schlagseite“ passt auf die ungleichmäßig verteilten Zufallszahlen erstaunlich gut.)
Wenn das Ding dann sicher im Hafenist
Harfenist? ;-) „Ey, Harfenmusik, nicht Hafenmusik!“ (Otto)
Ihr habt aber wahrscheinlich bei jeder Sache die Ihr gelernt habt, das Noobstadium uebersprungen und sofort in den Expertenmodus geschaltet.
Das hinkt zu sehr, um noch ein Vergleich zu sein. Es ist ja nicht so, dass die Codezeile zur Erzeugung ungleichmäßig verteilter Zufallszahlen komplizierter wäre als die zur Erzeugung gleichmäßig verteilter – im Gegenteil.
es ist ueberhaupt nicht noetig, bestimmte Fehler zu korrigieren.
Diesen schon – wie Kai schon verdeutlichte.
Qapla'
Hallo,
Meine Frage also: Arbeitet ihr wirklich in solchen klinisch sauberen und perfekten Umgebungen, daß ihr jeden Krümel Code nach hochgeschraubten ethischen Grundlagen schreibt? Gibt es Arbeitgeber wo sowas geht? Meist muss die Bude auf Rädern für die Fahrt doch reichen?
Ich denke die meisten die sich da so aufregen arbeiten nicht mal damit sondern haben es als ein Hobby entdeckt.
Jeena
Hi!
Sorry jetzt bin ich etwas überfordert, mit PHP bin ich leider noch nicht vertraut, ich spreche nur HTML und CSS ;-)
HTML und CSS sind statisch. Wenn Du nur HTML und CSS beherrscht und keinerlei Idee von Programmier-/Scriptsprachen hast, wirst Du Dein Vorhaben erstmal auf Eis legen muessen, bis Du entsprechende Kenntnisse erlangt hast.
Das Dir jetzt jemand eine Komplettloesung hinlegt ist selten.
Also schnepp Dir den Editor Deiner Wahl, ein oder 2 Basic Tutorials fuer serverseitige Programmierung und dann meld Dich wieder, falls Du Probleme hast. Dein Wunsch ist allerdings relativ leicht umzusetzen, wenn man eine Programmiersprache beherrscht. Genuegend Stichworte um entsprechende Befehle zu finden hast Du auch bekommen.
Fuer jede aufkommende Frage zur jeweils naechsten Huerde steht Dir hier jeder gern zur Verfuegung, falls Du allein nicht weiterkommst.
@@suit:
nuqneH
Array durchmischen
Ich vermute, dass das unperformanter ist als eine Zufallszahl r zu bestimmen und auf das r-te Element zuzugreifen.
Qapla'
Ich vermute, dass das unperformanter ist als eine Zufallszahl r zu bestimmen und auf das r-te Element zuzugreifen.
Was in der gegebenen Dimension vermutlich keine Rolle spielt :)
Hallo,
Okay hört sich gut an und wie würdest du das genau umsetzen?
Jeena
Ergäzend könnte man auch die URL zum Bild fest im CSS eingeben und dann per PHP jeweils ein zufälliges Bild unter dieser URL zurückgeben. Das wär jetzt mein erster Ansatz gewesen.