Website-Hintergrund - FRAGE!

[Dr. Watson]

Hi Leute.

Also ich hab folgendes Problem. Ich möchte in meinem Main-Frame ein Hintergrundbild haben. Das solltes sich aber nicht immer wieder wiederholen und mitscrollen sonder fest sein.

Bis dahin ja kein Problem. Aber wie schaff ich's daß dieses Pic immer genauso groß ist wie der Frame, sich also von der Größe her automatisch anpasst. Ich hoff es kommt jetzt einigermaßen rüber wie's gedacht ist....

[Valium]

Also ohne Tricks wie mit Javascript die Größe des Browserfensters zu ermitteln und dann mit z.B. PHP ein Bild der gleichen Größe zu generieren wirds nicht klappen.

Vor dem Problem stand ich auch mal und frage mich noch heute, warum sowas noch nicht in den CSS implementiert ist...

[etreu]

Du kannst meines Erachtens nicht die Größe eines Hintergrundbildes ändern.

Meine Erfahrungen:

1. Ist der Frame größer als das Bild, gibt es einen unerwünschten Rand.

2. Ist der Frame kleiner als das Bild, wird nur ein Ausschnitt des Bildes gezeigt.

[Controller]

Du meinst bestimmt das der Hintergrund immmer fest bleibt und dann nur Text oder die Bilder scrollen? Ich weiss leider den Code nicht auswendig aber schau mal in SELF HTML rein da findest du was du suchst!

[Controller]

sorry falsch verstanden ...

[EvilInside]

Also mit dem BODY-Tag und CSS wird es wohl nicht gehen -- es gäbe aber eine Art Workaround, der auch ohne JavaScript funktioniert:

Das Bild einfach als normales IMG-Tag einsetzen und width- und height-Attribut auf 100% setzen. Damit wird das Bild immer so groß gezogen, wie das Browserfenster.

Damit ist das Bild aber nicht im Hintergrund - das könnte man dann dadurch erreichen, daß der gesamte Inhalt in einem DIV-Layer liegt, welches per CSS positioniert wird.

Das müßte mit allen Browsern funktionieren, die CSS unterstützen und klappt auch ohne JavaScript :cool:

so long,

EvilInside

[etreu]

Das div müsste meines Erachtens noch nicht einmal positioniert. Wenn du sie einfach an die Stelle setzt, wo sie hinkommen sollen, müssten sie (korrigiert mich, wenn ich mich irre) relativ positioniert werden.

Über die Eigenschaft z-Index kannst du dann festlegen welche Ebene welche überlagert.

[EvilInside]

Original geschrieben von E-T

Das div müsste meines Erachtens noch nicht einmal positioniert. Wenn du sie einfach an die Stelle setzt, wo sie hinkommen sollen, müssten sie (korrigiert mich, wenn ich mich irre) relativ positioniert werden.

Wenn man nichts angibt, dann ist die Positionierung relativ, d.h. innerhalb des "Document-Flow".

Ich bin mir nicht absolut sicher, aber wenn das DIV einfach im Document-Flow liegt, würde es ggf. unterhalb des Bildes auftauchen und somit gar nicht mehr zu sehen sein. Das habe ich aber nicht getestet.

Ich würde das DIV immer explizit positionieren, da man dann auf der sicheren Seite ist. Mag aber sein, daß es auch ohne dem geht.

[John77]

schon ma drüber nachgedacht,

wie das gleiche bild gestaucht in

800x600 und dazu im vergleich in 1600x1200...

ich glaube es könnte je nachdem gestaucht,

gezerrt oder extrem pixlig sein...

[EvilInside]

Original geschrieben von John77

schon ma drüber nachgedacht,

wie das gleiche bild gestaucht in

800x600 und dazu im vergleich in 1600x1200...

ich glaube es könnte je nachdem gestaucht,

gezerrt oder extrem pixlig sein...

Da habe ich nicht nur drüber nachgedacht, ich habe es auch ausprobiert. Aber ich bin sehr auf deinen Verbesserungsvorschlag gespannt...

Selbstverständlich hat man einen krassen Pixeleffekt, wenn man ein 160x120 Bild auf 1600x1200 hochskaliert.

Und: es wird definitiv Verzerrungen geben, wenn das Browserfenster nicht die selben Proportionen hat, wie das Bild (das Seitenverhältnis muß stimmen).

Zum 1.Punkt:

Wenn man ein Aufpixeln verhindern will, sollte man ein entsprechend großes Bild verwenden, welches im Zweifelsfall "runterskaliert".

Man hat durch die Clientseitige Lösung den zusätzlichen Vorteil, daß das Bild mit dem Fenster "dynamisch" mitskaliert.

Zum 2.Punkt:

Das kommt eben darauf an, was man machen will. Soll das Fenster frei veränderbar sein in der Größe, dann kann man entweder nicht den ganzen Bildschirm ausfüllen, oder aber man hat Verzerrungen.

Eine andere Möglichkeit wäre es, das Fenster nur proportional skalieren zu lassen, in dem man den onresize-Event abfängt.

Dann braucht man aber schon JavaScript.

SLS,

EvilInside

[beebof]

Original geschrieben von EvilInside

Also mit dem BODY-Tag und CSS wird es wohl nicht gehen -- es gäbe aber eine Art Workaround, der auch ohne JavaScript funktioniert:

Das Bild einfach als normales IMG-Tag einsetzen und width- und height-Attribut auf 100% setzen. Damit wird das Bild immer so groß gezogen, wie das Browserfenster.

Damit ist das Bild aber nicht im Hintergrund - das könnte man dann dadurch erreichen, daß der gesamte Inhalt in einem DIV-Layer liegt, welches per CSS positioniert wird.

Das müßte mit allen Browsern funktionieren, die CSS unterstützen und klappt auch ohne JavaScript :cool:

aber damit hast du noch kein hintergrundbild, welches nicht mitscrollt. Dazu müsste man noch das Scrollen per JavaScript abfangen und das DIV ständig neu positionieren...

[EvilInside]

Original geschrieben von beebof

aber damit hast du noch kein hintergrundbild, welches nicht mitscrollt. Dazu müsste man noch das Scrollen per JavaScript abfangen und das DIV ständig neu positionieren...

Stimmt, das Mitscrollen wäre noch zu lösen. Dafür braucht man dann Javascript, aber machbar ist es auch.

Interessanter fand ich aber die Frage, ein skalierendes Hintergrundbild zu haben. :cool:

so long,

EvilInside