✔ Fehler bei Positionierung des Hintergrundbildes in Opera/FF

Status
Nicht offen für weitere Antworten.
M

Moritz123

Erfahrenes Mitglied
Hallo!

ich wollte mal eben probieren, ob es möglich ist, einen MouseOver sauber mit CSS zu realisieren. Dazu habe ich mir drei Bilder erstellt:
  • trans.gif - Transparentes "Vordergrundbild"
  • 1.gif - Bild bei MouseOut
  • 2.gif - Bild bei MouseOver
Dem ganzen habe ich folgenden CSS-Code zu Grunde gelegt:
HTML: 
<style type="text/css">
<!--
a.bild1:link, a.bild1:visited{
	background-image:url(1.gif);
}
a.bild1:hover, a.bild1:active{
	background-image:url(2.gif);
}
img{
	border:1px solid #000000;
	}
//-->
</style>

Im <body> der Seite habe ich dann folgendes definiert:
HTML: 
<a href="#" class="bild1"><img src="trans.gif" width="50" height="50" /></a>

Das funktioniert soweit auch schön und gut, allerdings hapert es im Opera und FF an der Positionierung des Hintergrundbildes. Dieses schiebt sich immer zu weit nach unten, so dass es lediglich das untere drittel des Vordergrunds abdeckt. (s. Anhang)

Nun meine Frage: wie kann ich das Hintergrundbild so positionieren, dass es auch in Opera und FF korrekt angezeigt wird?

Vielen Dank und ein schönes Wochenende!
 

Anhänge

  • opera_back.png
    opera_back.png
    424 Bytes · Aufrufe: 46
Hallo!

backgorund-position: top-left bringt leider nix. Das transparente gif brauche ich aber doch, um mein Hintergrundbild sichtbar zu machen.
 
Wenn backgorund-position: top-left nicht funktioniert, klappt es denn mit dem richtig geschriebenen background-position: top left?
 
Wende mal folgende CSS-Regel an:

Code: 
a.bild1:link, a.bild1:visited{
	background-image:url(1.gif);
	width:50px;
	height:50px;
	display:block;
}
a.bild1:hover, a.bild1:active{
	background-image:url(2.gif);
}
HTML: 
<a href="#" class="bild1"></a>
Anmerkung zu background-position: der erste Wert steht für die horizontale und der zweite Wert für die vertikale Position, demnach müsste es background-position:left top lauten.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück