Hintergrundbild rechts unten positionieren

[Kalle_B]

Hallöle,

laut SelfHTML kann ich ein Hintergrundbild relativ zur linken oberen Ecke positionieren:
  background-position: 30px[horizontal] 20px[vertical];

Aber relativ zur unteren rechte Ecke scheint es nicht zu gehen, denn
  background-position: bottom right;

positioniert genau am Rand, ohne Abstand.

Gibt es eine Möglichkeit, einen definierten Abstand vom unteren und rechten Rand zu haben?

Eine Größenangabe für Hintergrundbilder gibt es ja auch nicht, oder? Wenn Schrift und Grafiken vergrößert werden ([Ctrl][+] im FF), bleiben die Hintergrundbilder, wie sie sind?

Gruß, Kalle

[Davok`xarden]

evtl. kann man sowas mit Javascript lösen.
Also zum Beispiel:

var element = document.getElementById(/*Dein Element*/);
var height = element.style.height;
var width = element.style.width;
var screenheight,screenwidth; // Keine Ahnung wie du die kriegst

element.style.top = screenheight - height - /*Dein Abstand zum Boden*/;
element.style.left = screenwidth - width - /*Dein Abstand zum Rand*/

[bleicher]

und was ist mit - right:20px , bottom:20px; ?angaben müssen nicht left/top bezogen sein...
was doe größe angeht - interesiert mich auch - falls du an die lösung kommst - bitte mailen ;)
MFG
bleicher

[Kalle_B]

und was ist mit - right:20px , bottom:20px; ?angaben müssen nicht left/top bezogen sein...

Das bezieht sich auf das Element, das das Hintergrund beinhaltet. Dieses Element hat einen Rand (border:1px solid #f00). Dann hat das Bild immer noch keinen Abstand zum border.

Kalle

[Kalle_B]

evtl. kann man sowas mit Javascript lösen.

Meine Anwendung: Besuchte Links möchte ich mit einer Hintergrund-Grafik "abhaken". a wurde mit display:block definiert.

#fix_links a:visited {
  color:#c0c;
  background-image:    url(../img/ok_gruen_kl.gif);
  background-repeat:   no-repeat;
  background-position: bottom right;
}

Und hätte es nicht so gerne rechts unten in die Ecke geklatscht, sondern ein paar Pixel Abstand. Ist aber "nur" eine ästhetische Frage, die Funktion ist mit obiger Definition ja gewährleistet.

Javascript in diesem Falle nicht, da ich mit verschiedenen CSS- Dateien verschiedene Effekte erzielen möchte.

Kalle

[Sven Rautenberg]

Moin!

Und hätte es nicht so gerne rechts unten in die Ecke geklatscht, sondern ein paar Pixel Abstand. Ist aber "nur" eine ästhetische Frage, die Funktion ist mit obiger Definition ja gewährleistet.

Dann bau in die Hintergrundgrafik die Pixel zusätzlich als Abstand ein - und schon gehts auch mit background-position:right bottom.

- Sven Rautenberg

[Kalle_B]

Moin!

Dann bau in die Hintergrundgrafik die Pixel zusätzlich als Abstand ein - und schon gehts auch mit background-position:right bottom.

Ja, hört sich zunächst vernünftig an. Die zusätzlichen Pixel müssten dann transparent sein, womit FF (zumindest beim Drucken) wieder Probleme hat (macht Transparenz deckend weiss).

Die Prozent-Lösung ist pfiffiger. Danke.

Kalle

[Mathias Brodala]

Hallo Kalle_B.

#fix_links a:visited {
  color:#c0c;
  background-image:    url(../img/ok_gruen_kl.gif);
  background-repeat:   no-repeat;
  background-position: bottom right;
}

Und hätte es nicht so gerne rechts unten in die Ecke geklatscht, sondern ein paar Pixel Abstand.

Dann versuche doch einmal „background-position: 95% 95%“. (Zahlen natürlich nach Belieben anzupassen.)

Einen schönen Sonntag noch.

Gruß, Mathias

[Kalle_B]

Hallo Mathias,

Dann versuche doch einmal „background-position: 95% 95%“. (Zahlen natürlich nach Belieben anzupassen.)

Ja, das klappt wunderbar. Danke.

Gruß, Kalle

[ansgar1704]

Hallöle,

laut SelfHTML kann ich ein Hintergrundbild relativ zur linken oberen Ecke positionieren:
  background-position: 30px[horizontal] 20px[vertical];

Aber relativ zur unteren rechte Ecke scheint es nicht zu gehen, denn
  background-position: bottom right;
positioniert genau am Rand, ohne Abstand.

Gibt es eine Möglichkeit, einen definierten Abstand vom unteren und rechten Rand zu haben?

margin-right:22px wäre z.B. ein Abstand zum rechten Rand und nach unten margin-bottom:22px

Eine Größenangabe für Hintergrundbilder gibt es ja auch nicht, oder? Wenn Schrift und Grafiken vergrößert werden ([Ctrl][+] im FF), bleiben die Hintergrundbilder, wie sie sind?

größe von hintergrundbildern kann man nicht ändern, wenn sie mit background-image eingefügt sind, ansonsten, bei <img> mit <img width="??" und hight="??"

Ich hoffe ich konnte dir damit helfen.