• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wie kann man Hintergrundfarbe automatisch an Bilder anpassen?

N

NachtMensch

Neues Mitglied
Hallo alle zusammen!

Ich habe auf meiner Seite zufällig wechselnde Hintergrundbilder, was auch ganz schön aussieht solang der Inhalt nicht über das Hintergrundbild hinausgeht.
Ich laße die Hintergrundbilder zurzeit mithilfe von repeat-y einfach nach unten an die Inhaltsgröße anpassen.
Dies sieht je nach Bild natürlich nicht grad schön aus!

Daher frage ich mich jetzt wie ich es erreichen kann, daß sich die Hintergrundfarbe automatisch an dem unterem Teil der Hintergrundbilder anpasst.
Ich freue mich auf eure Tips!!!
 
Du musst halt mit dem, was die Bilder zufällig einblendet (JavaScript, PHP), zusätzlich die Hintergrundfarbe ändern lassen. Also zu der Liste der Bilder müsstest eine zweite Liste der zugehörigen Hintergrundfarben bereitstellen und dann immer passend beides ändern.
 
Da du auch deine Implementierung nicht genau beschreibst, kann man dir auch nicht recht helfen. Irgendwo in deinem Javascript Code wird doch wohl (zufällig) der Pfad zum Bild gesetzt. Genau an der Stelle müsstest analog (vermutlich vom body) beim Style die Hintergrundfarbe setzen. Üblich ist bei solchen Fragen, dass man entweder die relevanten Codeteile oder einen Link zur Homepage hier postet.
 
Sorry natürlich ohne Code ist es etwas schwer, hier der kleine Code der für den Zufall zuständig ist:


<script type="text/javascript"> var zufall = Math.round(2 * Math.random()) + 1; document.write('<body style="background: URL(img/bg' + zufall + '.jpg); background-repeat:no-repeat; background-position:50% 0%">') </script>
 
Na da hast es doch. Dann machst dir noch ein array bgcolor[] mit den zu Bildern gehörenden Hintergrundfarben und schreibst im style Teil noch zusätzlich
HTML: 
 ... background-position:50% 0%; background-color: " + bgcolor[zufall] + ">' )</script>
Die Frage ist allerdings, ob die zum Bild passende Hintergrundfarbe dann auch zum restlichen Layout passt. Eventuell musst dann den gesamten Style ändern und dann wäre es besser, zufällig eine style.css per Javascript einzubinden. Das Problem ist auch, dass Leute mit deaktiviertem Javascript bei dir keinen Body-tag haben :-)
 
Zuletzt bearbeitet:
NetAktiv schrieb:
Die Frage ist allerdings, ob die zum Bild passende Hintergrundfarbe dann auch zum restlichen Layout passt.
Zum Vergrößern anklicken....

Ja das ist natürlich richtig, sieht dann auch nicht immer toll aus.
Dann sollte ich lieber das Hintergrundbild immer auf volle Bildschirmgröße bringen ohne es zu verzerren, ich denke so würde es besser aussehen!
Eine Idee wie ich das lösen kann? JS ist mir leider noch sehr fremd...
 
Irgendwie muß man das doch hinbekommen oder zumindest ähnlich. Habe mir die Finger wund gegooglet aber habe leider auch nur ein Plugin mit dem Name jQuery gefunden...
 
Da kannst Googlen wie du willst, du kannst das Bild auf 100% Höhe oder Breite bringen, aber wenn der Bildschirm nicht Höhe/Breite wie das Bild hat, dann kommt es immer zu Verzerrungen, wenn du beide Dimensionen auf 100% bringst.
 
Mhh eventuell sollte ich mich dann an einer überdurchschnittlich großer Auflösung orientieren und mit overflow das Bild "beschneiden" laßen wenn die Auflösungen kleiner sind als das Bild. Würde dann nur auf riesigen oder mini Auflösungen blöd aussehen.
Naja ich werd da mal eine Nacht drüber schlafen ob und wenn wie ich das umsetze, bin zwar ein NachtMensch aber heut gehts mal früh ins Bettchen^^
 
Was mir noch eingefallen ist:

- Das Hintergrundbild mit Photoshop in allen gängigen Auflösungen speichern.
- Mit JavaScript die Größe des Browserfensters auslesen.
- Analog dazu dazu das entsprechende Hintergrundbild laden.

Damit solltest du den gewünschten Effekt erzielen, falls der Besucher seinen Browser im Vollbildmodus benutzt.
 
Tronjer schrieb:
Was mir noch eingefallen ist:

- Das Hintergrundbild mit Photoshop in allen gängigen Auflösungen speichern.
- Mit JavaScript die Größe des Browserfensters auslesen.
- Analog dazu dazu das entsprechende Hintergrundbild laden.

Damit solltest du den gewünschten Effekt erzielen, falls der Besucher seinen Browser im Vollbildmodus benutzt.
Zum Vergrößern anklicken....
Gute Idee, daran hatte ich auch schon gedacht aber das würde mir zu umständlich werden da ich ca. 80 verschiedene Hintergrundbilder einbinden möchte^^

mermshaus schrieb:
So schlecht sieht eine Skalierung meiner Meinung nach üblicherweise gar nicht aus. Ich mag den Effekt.

Ansätze:

- Perfect Full Page Background*Image | CSS-Tricks

Suchbegriff: „javascript full screen background“
Zum Vergrößern anklicken....

Wenn ich es mit CSS lösen würde, würden es mir zu wenig Browser unterstützen (wie ich gelsen habe).

Aber hier habe ich eine interessante Lösung gefunden, nur die Frage ob es mit meinen "zufälligen Hintergrundbildern" gut umsetzbar ist! HIER DER LINK
 
Gute Idee, daran hatte ich auch schon gedacht aber das würde mir zu umständlich werden da ich ca. 80 verschiedene Hintergrundbilder einbinden möchte^^
Zum Vergrößern anklicken....

- Stapelverarbeitung

Wenn ich es mit CSS lösen würde, würden es mir zu wenig Browser unterstützen (wie ich gelsen habe).
Zum Vergrößern anklicken....

Da stand auch was von JavaScript…

Heute will einfach niemand meine Posts lesen. :-(

nur die Frage ob es mit meinen "zufälligen Hintergrundbildern" gut umsetzbar ist!
Zum Vergrößern anklicken....

Bild ist in dem Fall wohl Bild.
 
So ich glaub ich habe es verstanden, beziehe mich jetzt auf die jQuery Method aus diesem Link:
- Perfect Full Page Background*Image | CSS-Tricks

Um es so umzusetzen muß ich meinem Hintergrundbild(ern) ja eine iD wie hier zuweisen:
<img src="http://www.html.de/images/bg.jpg" id="bg" alt="">

Ich habe meine Hintergrundbilder aber über JS (womit ich mich leider noch nicht so gut auskenne wie schon einmal erwähnt)eingepflegt, daher jetzt meine Frage: Wie kann ich in meinem Fall dem Hintergrundbild eine ID zuweisen?

Hier mein Code für die Hintergrundbilder:
<script type="text/javascript"> var zufall = Math.round(2 * Math.random()) + 1; document.write('<body style="background: URL(img/bg' + zufall + '.jpg); background-repeat:no-repeat; background-position:50% 0%">') </script>

Edit:
Ich verlager das Thema mal lieber ins Unterforum JS, da ist es wohl besse raufgehoben...
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben