nicht angemeldet
Platzieren eines Hintergrundbildes
Matthias Apsel
Der Martin
Gunnar BittersmannHallo,
ich möchte eine Grafik gern als Hintergrundbild in eine Webseite einbauen,
sodass sie bei horizontaler Position x (wobei hier ein Pixel-Wert übergeben werden soll) am unteren Rand der Seite (nicht zu verwechseln mit dem sichtbaren Bereich im Browser) angebaut wird.
(Als Hintergrundbild deswegen, damit keine Scrollbars angebaut werden, wenn sich die Grafik nicht im sichtbaren Bereich des Browser-Fensters befindet. Sonst wärs ja allzu einfach. :) )
Das Hauptproblem seh ich momentan darin, dem "body"-Tag die passende Höhe zu geben, denn sonst würde die Positionierung mit einer Angabe wie
background-position: 1240px bottom;
ja wahrscheinlich recht einfach gelingen.
100% wird dabei ja als die Bildschirmhöhe interpretiert und nicht als die Seitenhöhe. Gebraucht würde aber die Seitenhöhe. :)
Die Content-Länge kann nahezu beliebig variieren kann und damit auch die Position des Footers mit der daneben zu platzierenden Grafik.
Mit JavaScript / jQuery würde mir zwar was einfallen, lieber wärs mir jedoch mit reinem CSS.
Hat jemand einen Cross-Browser-tauglichen CSS-Ansatz hierfür?
Gruß Michi
-
Hallo,
ich verstehe leider dein Problem nicht. Wenn die Seite halbwegs "normal" erstellt wird erscheint für Grafiken doch kein zusätzlicher Scrollbalken. Hast du vielleicht einen Link zur Seite, dann wird deine Frage vielleicht nachvollziehbarer.
Soll die Grafik immer sichtbar sein?
Gruss
MrMurphy
-
Hallo,
ich möchte eine Grafik gern als Hintergrundbild in eine Webseite einbauen,
sodass sie bei horizontaler Position x (wobei hier ein Pixel-Wert übergeben werden soll) am unteren Rand der Seite (nicht zu verwechseln mit dem sichtbaren Bereich im Browser) angebaut wird.Die Content-Länge kann nahezu beliebig variieren kann und damit auch die Position des Footers mit der daneben zu platzierenden Grafik.
Ich habe keine Ahnung, wie Du den Footer realisierst, aber warum verwendest Du nicht ein passendes Element Deines Footers für diese Hintergrundgrafik?
Freundliche Grüße
Vinzenz
-
Ich bin mir nicht ganz sicher aber schau dir diese Seite mal an. Ich denke das ist das was du suchst. Code findest du im Quelltext. guggst du
-
Ich bin mir nicht ganz sicher aber schau dir diese Seite mal an. Ich denke das ist das was du suchst. Code findest du im Quelltext. guggst du
Du empfiehlst eine Seite, die an Divitis extremalis krankt?
gruß
Kalk
-
-
Om nah hoo pez nyeetz, Michi!
ich möchte eine Grafik gern als Hintergrundbild in eine Webseite einbauen,
sodass sie bei horizontaler Position x (wobei hier ein Pixel-Wert übergeben werden soll) am unteren Rand der Seite (nicht zu verwechseln mit dem sichtbaren Bereich im Browser) angebaut wird.Positionierung von Hintergrundgrafiken: SelfHTML-Wiki
Das Hauptproblem seh ich momentan darin, dem "body"-Tag ...
Du meinst body-Element.
Matthias
--
1/z ist kein Blatt Papier.
-
Hi!
100% wird dabei ja als die Bildschirmhöhe interpretiert und nicht als die Seitenhöhe. Gebraucht würde aber die Seitenhöhe. :)
Hu? Welche 100% sind denn Bildschirmhoehe? Ich kenne kein Element, dass sich an der Bildschirmhoehe orientiert.
Wenn ich Dich richtig verstehe, moechtest Du eine Hintergrundgrafik, am unteren Ende eines Elementes platzieren. Da sehe ich kein Problem. Matthias' Link bestaetigt das. Evtl. hast Du inkorrektes CSS? Hast Du ein Beispiel?
--
Signaturen sind blöd! -
Hi,
ich möchte eine Grafik gern als Hintergrundbild in eine Webseite einbauen, sodass sie bei horizontaler Position x (wobei hier ein Pixel-Wert übergeben werden soll) am unteren Rand der Seite (nicht zu verwechseln mit dem sichtbaren Bereich im Browser) angebaut wird.
gut, eigentlich kein Problem.
Das Hauptproblem seh ich momentan darin, dem "body"-Tag ...
Dem body-Element, nicht dem Tag. Das body-Tag hat eine Höhe von einer Zeile im Quellcode.
...die passende Höhe zu geben, denn sonst würde die Positionierung mit einer Angabe wie
background-position: 1240px bottom;ja wahrscheinlich recht einfach gelingen.
Und das für das body-Element. Ja, genau so einfach ist es auch.
Nebenbei bemerkt wird das Bild mit einem x-Offset von 1240px vermutlich bei sehr vielen Besuchern irgendwo weit rechts im Off verschwinden. Möchtest du vielleicht lieber
background-position: right bottom;
verwenden?100% wird dabei ja als die Bildschirmhöhe interpretiert und nicht als die Seitenhöhe. Gebraucht würde aber die Seitenhöhe. :)
Wo gibst du die 100% Höhe an? Lass die Höhenangabe weg, dann ist das body-Element genau so hoch, wie es sein Inhalt erfordert. Wenn es bei dir die gesamte Fensterhöhe (nicht Bildschirmhöhe!) einnimmt, betreibst du den Browser womöglich im Quirks Mode, indem du keine oder eine unvollständige DOCTYPE-Angabe hast.
Ciao,
Martin--
Alle Tage sind gleich lang. Aber unterschiedlich breit.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo zusammen,
nachdem ich das Dokument jetzt mal valide nach "XHTML 1.0 Transitional" geformt habe und nochmal die Struktur untersucht habe, ist mir aufgefallen, dass da ab einem gewissen Teil der Seite mit absoluter Positionierung positioniert wurde. Wenn ich diesen Container normal floaten lasse, ändert sich auch schlagartig die Höhe von <body>, aber ich muss noch etwas weiterexperimentieren, denn exakt stimmt es immer noch nicht, die Hintergrundgrafik wird immer noch nicht ganz unten platziert.
Werde dann bescheidgeben, was sonst noch gestört hat.
Bis demnächst, Michi
-
Om nah hoo pez nyeetz, Michi!
Wenn ich diesen Container normal floaten lasse, ändert sich auch schlagartig die Höhe von <body>,
Klar, weil gefloatete Elemente keinen Einfluss auf die Abmessungen ihres Elternelementes haben, allerdings bleibt die Höhe von "<body>" bei einer Zeile im Quelltext (der Martin).
Matthias
--
1/z ist kein Blatt Papier.
-
-
@@Der Martin:
nuqneH
Das body-Tag hat eine Höhe von einer Zeile im Quellcode.
<body id="Gegenbeispiel" class="um-Den-Martin-zu-ärgern" >Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo Gunnar,
Das body-Tag hat eine Höhe von einer Zeile im Quellcode.
<body
id="Gegenbeispiel"
class="um-Den-Martin-zu-ärgern"danke, ich warte schon seit gestern drauf, dass jemand mit dieser Spitzfindigkeit kommt ... ;-) Schönes Wochenende, Martin -- Rizinus hat sich angeblich als sehr gutes Mittel gegen Husten bewährt. Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-