Background immer 100%

schuschain

unregistriert
Thread Starter
Dabei seit
12.07.2005
Beiträge
162
Reaktionspunkte
0
Hallo an alle Macuser.

Bei Flashseiten sieht man immer häufiger, dass die Hintergrundbilder sich bei Größenänderung des Browserfensters proportional vergrößern/verkleinern.

D.h. es soll nicht ein kleines background-gif auf repeat... gestellt werden, sondern ein richtiges Foto eingebaut werden.

Kann man so einen Effekt auch mit CSS o.ä. erziehlen, wenn ja wie?


Tausend Dank im Voraus.

Schuschain
 
ich hab jetzt grade keine ahnung was du meinst, poste wenns geht mal eine beispielseite wo man sowas sieht!
 
ist kaum realisierbar ohne flash...

der autor hat einfach eine tabelle mit der breite 100% und der höhe 100% eingesetzt, und dorthinein dann seine flash datei... und weil flash wie ein video angesehen wird, verändert er eben die größe der flash datei immer mit der fesntergröße!
 
Schade.

Schau doch mal bei dieser Seite: http://www.soleilnoir.net/

Dort ist ein Background in die linke untere Ecke gesetzt. Das würde ja funktionieren, wenn ich einfach in CSS ein Background auf die Position: left bottom setzen würde. Ich würde es einfach wie bei der oberen Adresse, nach oben hin offen lassen.

Jetzt meine Frage, wie würdest Du/Ihr dieses Bild am Besten speichern, damit es vielleicht von der Datenmenge her nicht zu groß wird bzw. wie groß würdest Du/Ihr gehen, damit das Bild bei den gängisten Auflösungen die volle Breite ausfüllt? Sind da 1100 px zu wenig?
 
ist kaum realisierbar ohne flash...
So ist es. Ein Hintergrundbild kann man nicht stretchen.

Was man machen kann: Ein DIV mit 100% Höhe/Breite hinter die Seite legen (z-index). Dorthinein wiederum ein Bild (gestretcht) setzen.

Wahrscheinlich ist das aber nicht mit purem CSS lösbar. Soweit ich mich erinnere gilt die style-angabe width/height:100% für die Grösse des Bildes und nicht für das umschliessende Tag. Demnach müsste man das ganze per JS resizen (per Eventhandler onresize)
 
Zuletzt bearbeitet von einem Moderator:
@dms

Du bist der HELD!!! Vielen Dank. Ich habe mir im Netz ein JS-Script heruntergeladen und eingebaut. Funktioniert perfekt!
 
schuschain schrieb:
@dms

Du bist der HELD!!! Vielen Dank. Ich habe mir im Netz ein JS-Script heruntergeladen und eingebaut. Funktioniert perfekt!
Heißt das, es klappt jetzt? Kannste dann mal nen Link posten?
 
@ heldausberlin

Hier der Link von meiner Testseite: http://www.henndesign.com/test/

Ich habe jetzt noch ein Problem. Und zwar habe ich die Resize-Funktion width, als auch height auf 100% gesetzt. Da wird das Bild nicht proportional vergrößert/verkleinert. Wenn ich aber die height 100% entferne skaliert er mir das Bild zwar proportional, ich habe aber dann unten einen unschönen rand.

Das andere Scipt von "dms" funktioniert da glaube ich noch etwas besser. Das werde ich auch noch ausprobieren.

Aber trotzdem an alle 1000 Dank!
 
Zuletzt bearbeitet von einem Moderator:
schuschain schrieb:
@ heldausberlin

Hier der Link von meiner Testseite: http://www.henndesign.com/test/
Cool!
Wenn ich JS in Safari deaktiviere, zeigt er mir die Seite trotzdem. Heißt das, es ginge auch ohne JS?

Wenn du das Bild als Hintergrund nimmst, stört es nicht, wenn es etwas verzerrt ist.
Da auch niemand die gleichen Proportionen im Browserfenster hat (angefangen durch zusätzliche Leisten im Browser, sowohl oberhalb als auch links), wird es anders auch schwierig. Dann müsste höchstens ein überstehender Teil abgeschnitten werden. Aber ob das besser aussieht?
 
Zuletzt bearbeitet von einem Moderator:
Das ist halt noch ein Problem, dass ich versuche zu lösen.

Ich müsste hierzu die Höhe (height: 100%) weglassen, dass das Bild immer nur der Breite angepasst wird. Dann hätte ich es, dass das Bild sich proportional vergrößert/verkleinert aber Folge wäre ein unschöner Balken im unteren Bereich.

Ich habe es auf meiner Testseite geändert und den Hintergrund eingefärbt. Dann versteht man vielleicht besser was ich ständig mit dem Balken meine.

http://www.henndesign.com/test/
 
Zuletzt bearbeitet von einem Moderator:
Also, vielen Dank nochmal!

Ich habe das "Balken-Problemchen" :) wie folgt gelöst. Ich habe den Kugelschreiber aus dem Bild herausretuschiert und height wieder auf 100% gesetzt. Ohne Kugelschreiber merkt man kaum, dass das Bild verzerrt wird. ;-)

Vielen Dank und viele Grüße.

schuschain
 
Zurück
Oben Unten