HTML/CSS - Hintergrundbild skalieren?

[Exceen]

Ich arbeite derzeit an einer Website, allerdings läuft da nicht alles so, wie ich es haben will.
Problem ist hier das Hintergrundbild, welches ich auf eine spezielle Art und Weise skalieren will. Ohne hier jetzt lange rumzureden, seht euch mal bitte diese Bilder hier an:

http://dl.dropbox.com/u/34140308/uploads/Screen Shot 2012-10-18 at 8.30.50 PM.png
http://dl.dropbox.com/u/34140308/uploads/Screen Shot 2012-10-18 at 8.30.54 PM.png

Wie man sieht, soll das Hintergrundbild immer von der linken oberen Ecke ausgehen. Das Seitenverhältnis soll ebenfalls beibehalten werden. Ich habe auch schon nach Lösungen im Internet gefunden, allerdings wurde da vom Bild dann nie was weggeschnitten, weshalb ich dann immer irgendwo einen schwarzen Rand (wegen schwarzen Hintergrund) habe, diesen will ich verhindern.

Kurz gesagt: Das Bild soll von oben links entspringen, es soll davon so viel angezeigt werden, wie möglich, ohne dass ein schwarzer Rand entsteht.

Ich bitte um Hilfe, daher ich hier echt nicht mehr weiterkomme...

 

[Illuminus]

Wenn ich das richtig verstehe:
- Das Hintergrundbild soll bei großem Fenster Skalier sein.
- Verkleinert man das Fenster soll ab einer gewissen Größe das Bild "abgeschnitten sein"

Sollte mit jQuery resize even, background-clip und background-size gehen.

 

[das_micha]

Entweder verstehe ich das Problem nicht oder es gibt keins. Skaliert wird da ja so wie ich das sehe nix. Du willst das Bild halt nur oben links statt wie per Default Center haben. Dann probier mal: (langform, sollte bei bG bevorzugt werden da in diesem fall Kurzform leider in manchen Browser/os Kombis rumzickt)
background-image: url('Bild.ext');
background-position: Top left;

Sollte, sofern ich dein Problem richtig verstanden habe helfen.

 

[Exceen]

Das skaliert das Bild aber nicht.
Wie man den Bildern entnehmen kann, soll das Bild entweder unten oder rechts (sofern das Browser-Fenster nicht genau das gleiche Verhältnis hat wie das Bild) überstehen, das wird weggeschnitten. Und wenn man sich diesen weggeschnittenen Teil jetzt dazudenkt, dann wird in keinem Fall, die rechte untere Ecke mit dem Bild bedeckt. Das Bild muss dabei aber auch immer das gleiche Seitenverhältnis behalten, daher ich nicht will, dass das Bild dann verzogen ist.

Oder noch eine andere Erklärung, vielleicht ist es so verständlicher:
Das Bild muss eine Höhe sowie eine Breite von mindestens 100% haben (das ist die Bedingung/Voraussetzung). Dabei sollen dann aber die niedrigsten Werte genommen werden, womit die Bedingung erfüllt werden kann. Seitenverhältnis soll beibehalten werden.
-> Im Idealfall beide 100%. Ansonsten muss einer der Werte 100% haben und der andere irgendetwas über 100%.

Bei der Lösung von dir wird dann aber nur (beispielsweise) 70% der Höhe und 90% der Breite angezeigt. Der Rest wird einfach weggeschnitten. Hierbei wird aber dann von der Breite UND von der Höhe was abgeschnitten. Es soll aber nur von der Breite ODER von der Höhe was abgeschnitten werden (oder im Idealfall halt wieder gar nichts).

 

[das_micha]

Ich bin echt zu blöde... Verstehe nur Bahnhof... Dir geht es also nicht darum, das das Bild immer gleich groß ist? Es soll also tatsächlich skaliert werden. Also um mal in Zahlen zu sprechen: Bildschirm 1920 breit. Browser ebenfalls. Dann soll das Bild 1920 breit sein? Ist das browserfenster nur 1800, dann soll das Bild auf eine Breite von 1800 proportional skaliert werden? Was bei voller Höhe zur folge hätte das es "flacher" wird. Richtig? Oder soll das Bild unskaliert nur fix links oben sein?
Letzteres wie ich sagte als bG Image im Body. Das andere wie oben erwähnt über JavaScript. Skalieren von hintergrundbildern in Elementen geht wenn nur in CSS 3 und da dürfte es kompatibilitätsprobleme mit Browsern geben. Daher würde dann nur ein tatsächliches Bildelement in nem wrapper funktionieren (scrollbalken müssen vermieden werden. Du müsstest in dem fall die Größe und seitenverhältnisse des viewports Abfragen und anhand des Seitenverhältnis das Bild im wrapper skalieren. Wäre so der erste Gedankenansatz.
Da aber fullsize Backgrounds mit Skalierung nix neues sind wirst du sicher fertige Lösungen finden.

Google mal nach "jquery Dynamic Background Site" da waren einige Treffer die auf den ersten Blick nach ner Lösung ausgesehen haben

 

[Illuminus]

Suchst du so etwas?

http://welzels.de/apfeltalk/post3875763/

 

[Exceen]

Ich bin echt zu blöde... Verstehe nur Bahnhof... Dir geht es also nicht darum, das das Bild immer gleich groß ist? Es soll also tatsächlich skaliert werden.

Ja, skalieren und dabei das Seitenverhältnis beibehalten!

Also um mal in Zahlen zu sprechen: Bildschirm 1920 breit. Browser ebenfalls. Dann soll das Bild 1920 breit sein? Ist das browserfenster nur 1800, dann soll das Bild auf eine Breite von 1800 proportional skaliert werden? Was bei voller Höhe zur folge hätte das es "flacher" wird. Richtig? Oder soll das Bild unskaliert nur fix links oben sein?

Was du mit "flacher" meinst, weiß ich nicht. Ansonsten ja. Genau das habe ich auch schon geschafft, nur dass dabei dann nie der ganze Hintergrund mit dem Bild gefüllt war.

Bsp.:
Browserfenster: 1440x900
Bild: 720x400

Bild wird skaliert, dabei hab ich dann immer ein Bild von 1440x800 rausbekommen. Unten entsteht dadurch dann natürlich ein "Streifen". So hab ich das schon geschafft, dieser Streifen soll aber auch noch entfernt werden. Deshalb muss das Bild auf irgendwas über1440 in der Breite und in der Höhe 900 skaliert werden.

Google mal nach "jquery Dynamic Background Site" da waren einige Treffer die auf den ersten Blick nach ner Lösung ausgesehen haben

Ich such Morgen mal danach, wäre aber nett wenn du trotzdem noch auf meine Frage eingehen könntest

Suchst du so etwas?

http://welzels.de/apfeltalk/post3875763/

Das ist ja das Bild das ich gepostet habe. Das rechts ist das, was dann übersteht (Breite >100%). So soll es sein.
Das was ich geschafft habe ist, dass die Breite in dem Beispiel dann 100% hat, und die Höhe dann <100%. Höhe und Breite sollen aber jeweils mindestens 100% haben, um solche Streifen so vermeiden.

 

[timmy38233]

Für die neueren Browser ist glaube ich die CSS3-Eigenschaft "background-size: cover;" die Lösung für Dich…?

Hier wird das SL-Standard Desktop Bild damit besetzt… Verändere mal die Fenstergröße. Ist das das was Du haben möchtest?

Das Bild wird hier je nach Fenstergrößer immer in voller Breite oder Höhe angezeigt, und dann an den Seiten abgeschnitten… Funktioniert ab FF 4, Chrome 3, Safari 4.1, Opera 10 und IE 9.

(Hier das Vergleichsbild in voller, unskalierter Variante: http://frankylicio.us/wp-content/uploads/2009/07/DefaultDesktop.jpg)

 

[Exceen]

Hier wird das SL-Standard Desktop Bild damit besetzt… Verändere mal die Fenstergröße. Ist das das was Du haben möchtest?

Das ist genau das, wonach ich gesucht habe! Vielen vielen Dank!

 

[timmy38233]

Gerne!
Hatte vor Ewigkeiten mal das selbe Problem und kannte diese Eigenschaft noch nicht (ich glaube die war damals auch nicht grade weit verbreitet, wenn überhaupt vorhanden) und musste mir ein Konstrukt aus CSS und JS zusammenbasteln bis es geklappt hat

Schön wenn ich Dir helfen konnte