background-position: bottom geht nicht in Firefox

[Günter]

Hallo,

ich versuche, im body einer Seite eine Hintergrundgrafik auf der Grundlinie zu positionieren:

body {
 background-color: #FFC1FF;
 background-image : url(img/quadrat.gif);
 background-position : bottom;
 background-repeat : no-repeat;
}

Im IE6 wird diese auch wie gewünscht angezeigt, doch Firefox und Opera zeigen nichts. Wenn die Beschreibung richtig ist, dass sich die Positionsangabe auf die linke obere Ecke der Grafik bezieht, ist dies Verhalten sicher richtig, doch was nützt mir eine Grafik, die unter dem Horizont liegt?

Wie erreiche ich das gewünschte Verhalten möglichst ohne Verrenkungen wie zusätzliche <div> Container?

[wahsaga]

hi,

ich versuche, im body einer Seite eine Hintergrundgrafik auf der Grundlinie zu positionieren:

Welche Grundlinie?
Redest du vom unteren Rand des Viewports, oder vom Ende des Bodys?

Im IE6 wird diese auch wie gewünscht angezeigt, doch Firefox und Opera zeigen nichts. Wenn die Beschreibung richtig ist, dass sich die Positionsangabe auf die linke obere Ecke der Grafik bezieht, ist dies Verhalten sicher richtig,

"Nichts" anzuzeigen richtig?

doch was nützt mir eine Grafik, die unter dem Horizont liegt?

Webseiten haben keinen "Horizont". Dürcke dich bitte klarer aus.

Wie erreiche ich das gewünschte Verhalten möglichst ohne Verrenkungen wie zusätzliche <div> Container?

In dem du erst mal klar definierst, was das "gewünschte" Verhalten ist.

Hast du background-attachment schon berücksichtigt?

gruß,
wahsaga

[Günter]

Hi,

hi,

ich versuche, im body einer Seite eine Hintergrundgrafik auf der Grundlinie zu positionieren:

Welche Grundlinie?
Redest du vom unteren Rand des Viewports, oder vom Ende des Bodys?

ich meine den unteren Rand des Viewports, also des sichtbaren Teils der Seite

Im IE6 wird diese auch wie gewünscht angezeigt, doch Firefox und Opera zeigen nichts. Wenn die Beschreibung richtig ist, dass sich die Positionsangabe auf die linke obere Ecke der Grafik bezieht, ist dies Verhalten sicher richtig,

"Nichts" anzuzeigen richtig?

doch was nützt mir eine Grafik, die unter dem Horizont liegt?

Webseiten haben keinen "Horizont". Dürcke dich bitte klarer aus.

»»
Mit Horizont meinte ich die Unterkante des Browserfensters

Wie erreiche ich das gewünschte Verhalten möglichst ohne Verrenkungen wie zusätzliche <div> Container?

In dem du erst mal klar definierst, was das "gewünschte" Verhalten ist.

»»
gewünscht ist die Darstellung einer BG-Grafik am unteren Rand des Browser-Fensters.

Hast du background-attachment schon berücksichtigt?

Das hat's gebracht! Mit background-attachment: fixed steht meine Grafik endlich am gewünschten Platz. Trotzdem hätte ich gern gewusst, wohin sie verschwindet, wenn ich diese Angabe nicht mache.

gruß,
wahsaga

Zunächst einmal vielen Dank für die hilfreichen Tips.
Gruß
Günter

[Gunnar Bittersmann]

Hello out there!

Trotzdem hätte ich gern gewusst, wohin sie verschwindet, wenn ich diese Angabe nicht mache.

Das sagte ich dir bereits. [https://forum.selfhtml.org/?t=156951&m=1020987]

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

Im IE6 wird diese auch wie gewünscht angezeigt, doch Firefox und Opera zeigen nichts.

Doch, das tun sie – in voller Höhe der 'body'-Box. Wie hoch ist diese?

Wie erreiche ich das gewünschte Verhalten möglichst ohne Verrenkungen wie zusätzliche <div> Container?

Indem du 'body' eine (Mindest-)Höhe gibst.

See ya up the road,
Gunnar

[Günter]

Hi,

Hello out there!

Im IE6 wird diese auch wie gewünscht angezeigt, doch Firefox und Opera zeigen nichts.

Doch, das tun sie – in voller Höhe der 'body'-Box. Wie hoch ist diese?

Gute Frage, wie hoch ist ein body? Habe bisher immer angenommen, dass er mindestens ein Browserfenster groß ist.

Wie erreiche ich das gewünschte Verhalten möglichst ohne Verrenkungen wie zusätzliche <div> Container?

Indem du 'body' eine (Mindest-)Höhe gibst.

Angaben in Pixeln bringen die Grafik n Pixel unterhalb des oberen Rands zum Vorschein, doch das ist ja nicht Sinn der Sache. Angabe 100% geht nicht.
Habe das Problem durch background-attachment: fixed gelöst (dank wahsaga)

See ya up the road,
Gunnar

Vielen Dank
Günter

[Gunnar Bittersmann]

Hello out there!

Gute Frage, wie hoch ist ein body? Habe bisher immer angenommen, dass er mindestens ein Browserfenster groß ist.

Teste die Annahme mit body {border: 3px solid red}

See ya up the road,
Gunnar

[Günter]

Hello out there!

Gute Frage, wie hoch ist ein body? Habe bisher immer angenommen, dass er mindestens ein Browserfenster groß ist.

Teste die Annahme mit body {border: 3px solid red}

See ya up the road,
Gunnar

Hi Gunnar,

danke für diesen hilfreichen Tip, so macht man Obskures sichtbar ;-)

Da im Body nur zwei absolut positionierte DIVs standen hatte der Body die Höhe 0 px -> kein background-image zu sehen.

Wieder was dazugelernt
Gruß
Günter

[Gunnar Bittersmann]

Hello out there!

danke für diesen hilfreichen Tip, so macht man Obskures sichtbar ;-)

Um es richtig obskur zu machen wirken einige Eigenschaften doch auf den ganzen Viewport ('background-color'). Einige, nicht alle.

See ya up the road,
Gunnar

[Gunther]

Hallo,

background-position : bottom;

du hast ja sicher auch vorher mal im entsprechenden SELFHTML-Kapitel nachgelesen!

background-position benötigt (fast) immer 2 Angaben, wobei sich dann die erste auf die horizontale, und die zweite auf die vertikale Ausrichtung bezieht. Ausnahme ist background-position: center;

Also wenn schon, dann teste mal:
background-position: left bottom;

Gruß Gunther

[MudGuard]

Hi,

background-position benötigt (fast) immer 2 Angaben,

Falsch.
Falls es sich um eines Schlüsselworte handelt, ist anhand dieses Schlüsselworts außer bei center die Achse bekannt, also ist auch klar, welches die fehlende Achse ist. Bei center ist es aber auch egal, da für die fehlende Achse sowieso center genommen wird, so daß sich center center ergibt, wo es wieder egal ist, ob das gegebene oder das angenommene center für die horizontale oder die vertikale Achse steht.
Bei Länge oder Prozentwert gilt dieser für die horizontale Achse, für die vertikale Achse wird dann 50% (bzw. das gleichbedeutende center) angenommen.

cu,
Andreas

[Gunther]

Hi,

background-position benötigt (fast) immer 2 Angaben,

Falsch.
Falls es sich um eines Schlüsselworte handelt, ist anhand dieses Schlüsselworts außer bei center die Achse bekannt, also ist auch klar, welches die fehlende Achse ist. Bei center ist es aber auch egal, da für die fehlende Achse sowieso center genommen wird, so daß sich center center ergibt, wo es wieder egal ist, ob das gegebene oder das angenommene center für die horizontale oder die vertikale Achse steht.
Bei Länge oder Prozentwert gilt dieser für die horizontale Achse, für die vertikale Achse wird dann 50% (bzw. das gleichbedeutende center) angenommen.

jepp, du hast natürlich Recht - Danke für die Korrektur.
Da ich persönlich eigentlich nur Prozentwerte verwende, waren mir die Schlüsselworte nicht so geläufig. Und weder in SELFHTML, noch in der deutschen Übersetzung der CSS 2.0 Spec steht das so explizit beschrieben, bzw. in den Beispielen werden immer beide Schlüsselwörter verwendet. Daraus habe ich dann einen falschen Schluß gezogen.

Wen es noch interessiert - in der original CSS 2.1 Spec steht es: http://www.w3.org/TR/CSS21/colors.html#background-properties

Also nochmals vielen Dank für die Korrektur.

Gruß Gunther