Zum Inhalt springen

Empfohlene Beiträge

Geschrieben

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....

Geschrieben

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...

Geschrieben

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.

Geschrieben

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!

Geschrieben

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

Geschrieben

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.

Geschrieben
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.

Geschrieben

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...

Geschrieben
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

Geschrieben
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...
Geschrieben
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

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...