CSS:background-image Positionierung & Filter:Alpha()

issie

hab eine Frage. gibt's irgendeine Seite, die funktionierende CSS Code aufgelistet ist?

ich habe folgende Probleme;

Hintergrundbild zu positionieren mit % Angabe (wie z.B. background-position: 100% 100%) funktioniert nicht immer mit Firefox, das übrigens mit IE 6.0 funktioniert.
mir scheint, dieses Problem ist nur bei der Bestimmung innerhalb <td></td>, beim <body></body> funktioniert immer.

Was Filter:Alpfa() funktion betrifft, funktioniert auch bei <body> Tags nicht.

Beispiel:

CSS Code in <td></td>
http://sinnport.com/de/sinnshop/cart.php

CSS Code in <body></body>
http://sinnport.com/de/index-zone1.html

Road-Runner

CSS-Code kannst Du hier validieren lassen:

http://jigsaw.w3.org/css-validator/validator-uri.html

Ansonsten empfehle ich Dir diese Seiten:

http://www.css4you.de/

http://css.fractatulum.net/

issie

jetzt habe ich statt % Angabe left und bottom ausprobiert, das wird aber doch nicht wahrgenommen. Nur 'center' hat's funktioniert...

trotzdem danke für baldige Hilfe!

Lg, issie

bugcatcher

Zitat von issie

Hintergrundbild zu positionieren mit % Angabe (wie z.B. background-position: 100% 100%) funktioniert nicht immer mit Firefox, das übrigens mit IE 6.0 funktioniert.
mir scheint, dieses Problem ist nur bei der Bestimmung innerhalb <td></td>, beim <body></body> funktioniert immer.

http://de.selfhtml.org/css/eigenschaf…ground_position
Mozilla ist bezüglich der Angabenreihenfolge der Positionen manchmal was bockig. Falls Du eine allgemeine deklaration machst (z.B. background:center bottom url() fixed;), sortier evtl. einmal die elemente um. Grundsätzlich macht Mozilla sonst keine Probleme.

Zitat von issie

Was Filter:Alpfa() funktion betrifft, funktioniert auch bei <body> Tags nicht.

http://de.selfhtml.org/css/eigenschaften/filter.htm

Dr. Evil

Mozillas kennen übrigens die CSS-Eigenschaft "opacity" mit der man auch eine Alpha-Transparenz erzeugen kann. Als Wert gibt man eine Zahl zwischen 0 und 1 an, dabei ist 1 komplett sichtbar, 0 komplett unsichtbar.

Black Shino

Ich würd gern nochmal darauf zurück kommen...

Auf dieser Seite von selfhtml.org steht, das Mozilla ab Version 1.0 die Positonierung "bottom" kennen sollte...

Hier allerdings funktioniert dieses Angabe nicht...

Mich würde sehr interessieren, warum es nicht funktioniert...

HaMF

Der body (also das HTML-Element <body>) ist immer nur so hoch wie der Inhalt von ihm.
In deinem Fall ist also der Body ungefähr 90 Pixel hoch (eben so hoch wie die Schrift + ein bisschen Abstand oben und unten.) Füg in deine CSS-Datei doch mal ein:

Code

body{ 
... 
border:1px solid #fff;
 ...
}

ein, dann siehst du, was ich mein.

Abhilfe: Füg noch ein min-height:100% ein:

Code

body {
...
    background-repeat:no-repeat;
    background-position:right bottom;
    min-height:100%;
    }

Dann sollte alles wie gewollt funktionieren

Gruß HaMF

Black Shino

Ich muss dich enttäuschen...
das Bild hängt immernoch irgendwo oben rechts in der Ecke -.-"
Überigens funktioniert das ganze mit dem IE ganz wunderbar....

HaMF

*kratz* Hab ich was verpasst? Seit wann funktioniert min-height beim Fx nicht wenn man versucht es auf den Body anzuwenden *überleg* mit height:100%; statt min-height:100% funktionierts übrigens, aber das könnte später (wenn der inhalt "höher als das Browserfenster") ist Pobleme geben.

*weiterüberleg*

edit2: ach doch ist recht logisch: so gehts (*sollte)

Code

html{
    min-height:100%;
    }

Black Shino

Danke
Das funktioniert

erklärst du mir auch noch was das genau bewirkt?

HaMF

genau das gleiche, was ich oben erklärt habe. Du musst dir nur statt body jedesmal ein <html> denken

Nein nochmal kurz erklärt
Dein Hintergrundbild ist ja im Grunde genommen nicht das Hintergrundbild vom gesamten Browserfenster, sondern nur von diesem <html>(bzw. Body)-Element
Und wenn dieses <html> nur ungefähr 90 Pixel hoch ist, dann passt das Hintergrundbild eben nicht ganz rein, und wird deshalb abgeschnitten.
Das min-height:100% bewirkt nun, dass dieses <html>-Element (und damit auch der body ) mindestens 100% (also so hoch wie dein Browserfenster) hoch ist. -> Das Hintergrundbild passt komplett rein und wird auch schön unten rechts ausgerichtet.

Black Shino

Genial...
Das ich nich selbst auf sowas komme....

Danke nochmal

brain

...ist durchaus verständlich und keinesfalls zu kritisieren. Es gibt viele Dinge, gerade was CSS-Feinheiten angeht, die man erst mit der Zeit richtig anwenden lernt und mit den Macken der Browser umzugehen weiß.