[gelöst] Vollbild-Hintergrund im Chatstream

Fragen zu HTML, CSS, eigenen Erweiterungen etc.
Benutzeravatar
Linus
Moderator
Beiträge: 1070
Registriert: 14.02.2005, 20:31
Wohnort: NRW
Kontaktdaten:

[gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von Linus » 22.05.2014, 12:11

Hallo zusammen,

jahrelang ( :mrgreen: ) 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:

Code: Alles auswählen

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
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 :)
Kein Support per PN!

Maxs
Moderator
Beiträge: 550
Registriert: 09.10.2008, 18:21
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von Maxs » 22.05.2014, 17:22

Daumen hoch für Linus :)

Sehr schön, damit wäre ein Millenium-Problem der Chatmodifikation endgütlig gelöst. :lol:
Wäre es nicht adäquat, den Usus heterogener Termini zu minimieren?

Benutzeravatar
Mogli
Beiträge: 456
Registriert: 18.10.2010, 23:42
Wohnort: Bayern
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von Mogli » 22.05.2014, 17:58

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:

Code: Alles auswählen

<body style="background-image: [color=#FF0000]URL zum Bild[/color]; background-attachment:fixed;">
Herzlichen Dank im voraus! :-)

Mogli
Großschreibung, Punkt und Komma sind nicht schwer und erfreut den Leser sehr! :-)
--------------------------------------------------------------------------------------------------------------------------------------------------

Maxs
Moderator
Beiträge: 550
Registriert: 09.10.2008, 18:21
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von Maxs » 23.05.2014, 01:09

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.
Wäre es nicht adäquat, den Usus heterogener Termini zu minimieren?

Webkicks
Webkicks - Team
Beiträge: 668
Registriert: 02.05.2003, 00:16
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von Webkicks » 26.05.2014, 11:53

Super Tipp, danke! Das sollte viele Chatadmins freuen :)

Benutzeravatar
Mogli
Beiträge: 456
Registriert: 18.10.2010, 23:42
Wohnort: Bayern
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von Mogli » 28.05.2014, 18:38

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?

Code: Alles auswählen

<script type="text/javascript">document.getElementsByTagName("html")[0].style = "height:100%;background-image:url(URL zum Bild);background-size:cover;background-repeat:no-repeat;background-attachment:fixed;background-position:center top;";</script>
Schöne Grüße
Mogli
Großschreibung, Punkt und Komma sind nicht schwer und erfreut den Leser sehr! :-)
--------------------------------------------------------------------------------------------------------------------------------------------------

Benutzeravatar
Mogli
Beiträge: 456
Registriert: 18.10.2010, 23:42
Wohnort: Bayern
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von Mogli » 18.10.2014, 00:47

*push*
Großschreibung, Punkt und Komma sind nicht schwer und erfreut den Leser sehr! :-)
--------------------------------------------------------------------------------------------------------------------------------------------------

Benutzeravatar
harry2109
Beiträge: 335
Registriert: 10.01.2010, 15:05
Wohnort: Nordhorn
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von harry2109 » 18.10.2014, 15:41

Moin Moin versuch es mal hier mit
Script:Zeigen
<style type="text/css">body{background-attachment:fixed; background-repeat: no-repeat;}</style>


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

Gruß Harry
Solltet ihr Rechtschreibfehler finden könnt ihr sie behalten denn ich Brauch sie nicht!

www.harry2109.de

Benutzeravatar
Mogli
Beiträge: 456
Registriert: 18.10.2010, 23:42
Wohnort: Bayern
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von Mogli » 18.10.2014, 18:59

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
Großschreibung, Punkt und Komma sind nicht schwer und erfreut den Leser sehr! :-)
--------------------------------------------------------------------------------------------------------------------------------------------------

Benutzeravatar
harry2109
Beiträge: 335
Registriert: 10.01.2010, 15:05
Wohnort: Nordhorn
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von harry2109 » 18.10.2014, 19:05

Dann versuch es so
Script:Zeigen
<style type="text/css">body{background-image: url("URL-ZUM-BILD");background-attachment:fixed; background-repeat: no-repeat;}</style>
Gruß Harry
Solltet ihr Rechtschreibfehler finden könnt ihr sie behalten denn ich Brauch sie nicht!

www.harry2109.de

Benutzeravatar
Mogli
Beiträge: 456
Registriert: 18.10.2010, 23:42
Wohnort: Bayern
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von Mogli » 18.10.2014, 19:59

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?
Großschreibung, Punkt und Komma sind nicht schwer und erfreut den Leser sehr! :-)
--------------------------------------------------------------------------------------------------------------------------------------------------

Benutzeravatar
harry2109
Beiträge: 335
Registriert: 10.01.2010, 15:05
Wohnort: Nordhorn
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von harry2109 » 18.10.2014, 20:09

Dann noch eine lösung hier bitte
Script:Zeigen
<style type="text/css">body{background-image: url("URL-ZUM-BILD");background-attachment:fixed; background-repeat: no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}</style>
Gruß Harry
Solltet ihr Rechtschreibfehler finden könnt ihr sie behalten denn ich Brauch sie nicht!

www.harry2109.de

Benutzeravatar
Mogli
Beiträge: 456
Registriert: 18.10.2010, 23:42
Wohnort: Bayern
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von Mogli » 18.10.2014, 21:01

Laut den Berichten der User wird das Bild leider nicht bei allen an die Auflösung angepaßt.
Großschreibung, Punkt und Komma sind nicht schwer und erfreut den Leser sehr! :-)
--------------------------------------------------------------------------------------------------------------------------------------------------

Benutzeravatar
harry2109
Beiträge: 335
Registriert: 10.01.2010, 15:05
Wohnort: Nordhorn
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von harry2109 » 18.10.2014, 21:13

Haben die denn den browser verlauf gelöscht und was interesant wäre welche browser es nich machen .
Gruß Harry
Solltet ihr Rechtschreibfehler finden könnt ihr sie behalten denn ich Brauch sie nicht!

www.harry2109.de

Benutzeravatar
Mogli
Beiträge: 456
Registriert: 18.10.2010, 23:42
Wohnort: Bayern
Kontaktdaten:

Re: [gelöst] Vollbild-Hintergrund im Chatstream

Ungelesener Beitrag von Mogli » 18.10.2014, 21:15

Also bei mir funktioniert es, ich habe Firefox. Eine hat Opera und der andere hat Google Chrome!
Großschreibung, Punkt und Komma sind nicht schwer und erfreut den Leser sehr! :-)
--------------------------------------------------------------------------------------------------------------------------------------------------

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 11 Gäste