BG-Image skalieren, oder so ähnlich

[SteBu]

Moin,

entweder es hagelt gleich auf mich ein von wegen "solch ein alter Hut, guckst Du hier" oder es gibt kaum sinnvolle Antworten.
Gibt es eine Möglichkeit(am liebsten CSS, obwohl mir da nix bekannt ist) ein background-image(Element Body) skalierbar zu machen?
Folgendes Beschreibung zum  Problem:
Ein BG-Image mit einem Muster, welches durch ein repeat immer sche*** aussehen würde soll den Viewport des Browser immer vollständig ausfüllen.

Ich habe schon überlegt ob man das nicht mittels XMLHttpRequest lösen könnte, also Seite schicken->mit JS die Screensize ermitteln->ab zum Server->richtige Größe schicken.

Gibt es dafür schon einen Workaround?

Thx
SteBu

[Dennis]

Hi SteBu,

Ein BG-Image mit einem Muster, welches durch ein repeat immer sche*** aussehen würde soll den Viewport des Browser immer vollständig ausfüllen.

Das geht mit CSS leider nicht.

Ich habe schon überlegt ob man das nicht mittels XMLHttpRequest lösen könnte, also Seite schicken->mit JS die Screensize ermitteln->ab zum Server->richtige Größe schicken.

Ja, das wäre vielleicht möglich, aber schlecht, denn wenn der User kein Javascript aktiviert hat, wartest du vergeblich auf den Request ;-)

Aber abgesehen davon ist es je nach Browsertyp auch etwas schwierig die genaue Größe des Darstellungesbereiches zu bekommen, denn die Größe des Fensters bringt nichts, da davon noch Sidenbars etc. abgezogen werden müssen.

Und selbst wenn du diese Probleme alle irgendwie auf Teufel-komm-raus schaffst zu lösen, dann müsstest du doch immer noch mit Javascript alle x Millisekunden einen neuen Request schicken, da du sonst nicht dem vorbeugen kannst, dass der User sein Fenster in der Größe ändert.

Wenn dann einer mit Kabelmodem deine Seite besucht, hört diese vielleicht gar nicht mehr auf zu laden ;-)

Gibt es dafür schon einen Workaround?

Mir ist keiner bekannt, ich lasse mich aber gerne belehren.

MfG, Dennis.

[SteBu]

Moin Dennis

Aber abgesehen davon ist es je nach Browsertyp auch etwas schwierig die genaue Größe des Darstellungesbereiches zu bekommen,

Stimmt, aber dafür ne Bibliothek zu schreiben sollte nicht so schwer sein.

»»...dann müsstest du doch immer noch mit Javascript alle x Millisekunden einen neuen Request schicken, ... dass der User sein Fenster in der Größe ändert.

Dafür könnte man onresize() nehmen.

Mir ist schon klar, das diese nat. die Netztlast/den Traffic ungebührlich steigert. Das ganze ist eigentlich auch mehr ein "Ich will das es geht" als eine sinvolle/bezahlte Sache.

Mir ist keiner bekannt, ich lasse mich aber gerne belehren.

Na und ich erst.

Danke für deine Antwort.

SteBu

[Gunther]

Moin,

Stimmt, aber dafür ne Bibliothek zu schreiben sollte nicht so schwer sein.

»»...dann müsstest du doch immer noch mit Javascript alle x Millisekunden einen neuen Request schicken, ... dass der User sein Fenster in der Größe ändert.

Dafür könnte man onresize() nehmen.

Mir ist schon klar, das diese nat. die Netztlast/den Traffic ungebührlich steigert. Das ganze ist eigentlich auch mehr ein "Ich will das es geht" als eine sinvolle/bezahlte Sache.

wenn's nur mit JS funktionieren soll, warum setzt du dann nicht die background-image Eigenschaft für body per JS nachdem du die Fenstergröße ermittelt hast?

Über den Sinn/ Unsinn solcher Maßnahmen brauche ich mich ja jetzt hier nicht auslassen, mal abgesehen davon, dass sich Bilder nicht so einfach beliebig skalieren lassen und dabei immer 'gut' aussehen (also wenn überhaupt würde ich 3 oder 4 Images für die Standardgrößen machen).

Gruß Gunther

[SteBu]

wenn's nur mit JS funktionieren soll

Ja am liebsten halt nicht mit JS.

Bin gerade am testen mit SVG. Könnte das gehen?

SteBu

[Frederik]

Hallo SteBu,

Bin gerade am testen mit SVG. Könnte das gehen?

Könnte. Hier gibt es das viewBox-Attribut, dass gerade für den Zweck gedacht ist. Ich bin mir aber nicht sicher, ob und in welchem Browser man SVG als background-image einbauen kann etc.

Falls Du damit rechnest, dass SVG unterstützt wird, und die Seite auch nur in dem Falle laufen soll (ansonsten könnte man ja eine alternative Version anbieten), dann könnte man auch gleich die ganze Seite in SVG machen. Das ist vor allem dann zu überlegen, wenn eine Seite nicht mehr als das verfügbare Fenster ausfüllt, da gerade mit dem Adobe-Plugin das Scrollen sehr umständlich ist.

Auf jeden Fall würde mich interessieren, was du in der Richtung herausgefunden hast!

Lieben Gruß
Fredo

[SteBu]

Auf jeden Fall würde mich interessieren, was du in der Richtung herausgefunden hast!

Ich sag bescheid wenn es eine vernünftige oder überhaupt eine Lösung gibt.

SteBu

[Gunther]

wenn's nur mit JS funktionieren soll
Ja am liebsten halt nicht mit JS.

per CSS:
Du könntest einen Layer mit deiner Grafik verwenden (width + height = 100%) und deine Grafik daran anpassen (width:100% + hight: auto).

Darüber legst du deinen Layer mit dem Inhalt (background:transparent).

Diese Methode beinhaltet viele Nachteile und/ oder verursacht neue/andere Probleme, mal von dem Aussehen der Grafik nach Browserskalierung ganz zu schweigen. Es ist halt eine 'theoretische' Möglichkeit.

Mal ehrlich - hast du solch einen Effekt schon einmal auf irgendeiner Webseite gesehen? Nein? Wahrscheinlich weil es dafür z.Z. keine praktikable Methode gibt.

Bin gerade am testen mit SVG. Könnte das gehen?

soryy, k.A.!

SteBu

Gruß Gunther