Forum zum WebKicks.De Chatsystem

Hallo zusammen,

jahrelang ( ) war es ein Problem, im Chatstream ein Hintergrundbild festzulegen, das in jeder Auflösung vernünftig aussieht. Da gabs dann diverse Tipps, vom verwenden einer beliebig wiederholbaren Textur, bis zum erzeugen eines im Hintergrund liegenden img-Tags. Das hat nun, dank CSS3, ein Ende. Wird im IE ab Version 9 unterstützt, IE8/XP kann und sollte einem nun wirklich mal egal sein Alle richtigen Browser unterstützen das ganze in aktuellen Versionen. Doch wie funktioniert das ganze nun? Es gibt eine neue CSS-Eigenschaft namens background-size, die die Größe des Hintergrundbilds festlegt. Diese kann auch den Wert cover annehmen, der genau das tut, was sein Name besagt. Dabei wird das Bild skaliert. Da jedoch jedes Bild seine "relevanten" Stellen woanders hat, gibt es außerdem background-position. Das Bild wird quasi um den angegebenen Punkt herum skaliert. Dazu gibt es folgende mögliche Werte: Und hier nun das lang ersehnte Script zum einfügen in die Ankündigung, ohne weitere Voraussetzungen (nichtmals die GSS):

<script type="text/javascript">document.getElementsByTagName("html")[0].style = "height:100%;background-image:url(http://www.4kdesktopwallpapers.com/wp-c ... -Arena.jpg);background-size:cover;background-repeat:no-repeat;background-position:center center;";</script>

Rote Stellen sollten natürlich angepasst werden, damit die für euch passen. Das 4K-Bild ist zum testen natürlich ideal gewesen, weil es immer nur verkleinert werden muss. Vergrößerung erzeugt immer matschige Bilder

Viel Spaß damit

Daumen hoch für Linus

Sehr schön, damit wäre ein Millenium-Problem der Chatmodifikation endgütlig gelöst.

Könnte bitte einer von den Experten einem unwissenden erklären, was der Unterschied zwischen dem Skript unten und dem neuen Skript von Linus ist:
Herzlichen Dank im voraus!

Mogli

Ganz einfach: Das Bild nimmt nun immer den gesamten Chatstream ein mit background-size:cover; - egal, wie groß der Chatstream ist (Bildschirmabhängig, kleineres Chatfenster, ...). Es skaliert so das große Bild (Linus nutzte hier ein 4k-Bild, damit so gut wie jede Auflösung ein gestochen scharfes Hintergrundbild hat) für jede Bildschirmgröße einfach zurecht. Das funktioniert sogar völlig autark, wenn man das Chatfenster einfach vergrößert oder verkleinert.
Mit background-position:center center; wird das Bild immer aus der Mitte heraus dargestellt. Das bedeutet, dass wenn der Chatstream zu klein ist, das Hintergrundbild außen abgeschnitten wird, sodass die Mitte immer in der Mitte ist und dargestellt wird. Siehst du, wenn du das Chatfenster sehr klein machst. Dann hast du auf jeden Fall immer das Zentrum des Bildes im Hintergrund und nicht z.B. die linke obere Ecke.

Super Tipp, danke! Das sollte viele Chatadmins freuen

Hallo zusammen,

ich habe das jetzt mal getestet:
1.) Wenn man keine Werbebefreiung hat, ragt das Bild ein bisschen ins Werbeframe.
2.) Wenn man das etwas schreibt, dann verschwindet nach und nach das Bild und wird vom geschriebenen überlagert. Die Funktion "background-attachment:fixed" hat bei mir nichts genützt! Was ist da noch falsch? Schöne Grüße
Mogli

*push*

Moin Moin versuch es mal hier mit


Einfach so in die erste und wenn für Gäste auch dann auch in die dritte ankündigung.

Gruß Harry

Hallo Harry,

danke für deine Antwort, aber leider funktioniert es nicht. Das Bild ist auch auf einem externen Webspace.

Schöne Grüße
Mogli

Dann versuch es so
Gruß Harry

Jetzt ist das Bild zwar fest, so wie es sein sollte, aber ich habe im unteren Teil immer noch einen Rand. Sollte das Bild aber nicht an jede Auflösung angepaßt werden?

Dann noch eine lösung hier bitte
Gruß Harry

Laut den Berichten der User wird das Bild leider nicht bei allen an die Auflösung angepaßt.

Haben die denn den browser verlauf gelöscht und was interesant wäre welche browser es nich machen .
Gruß Harry

Also bei mir funktioniert es, ich habe Firefox. Eine hat Opera und der andere hat Google Chrome!