Image als Button: Image einbinden geht nicht

[YelloW22]

hallo. ich möchte gern, für einen Rollovereffekt, 2 Grafiken für alle <a> Links einbinden.

CSS:

a
{
      display:block;
      font-size:20px;
      font-family:Verdana;
      text-align:left;
      background-image:url(images/button.png);
      text-decoration:none;
      color:#fff;


}
a:hover
{
      display:block;
      background-image:url(images/button_over.png);
}

HTML:

<a href="#" onclick="showReiter('home.php',this)" target="_self" title="Home">Home</a>

Wieso geht das nicht?
Es kommt trotzdem nur ein normaler Link ... die anderen Befehle wie Font, Farbe etc werden angenommen, nur das bild nicht ...

 

[Dockmodus]

Zumindest fehlt dort eine height-Regel.

Wenn das Hintergrundbild nicht horizontal wiederholt werden soll, dann auch eine width-Regel.

 

[Dockmodus]

Wenn das Hintergrundbild nicht horizontal wiederholt werden soll, dann auch eine width-Regel.

... die der Breite der verwendeten Bilddatei entspricht.

 

[hoctar]

a
{
      display:block;
      font-size:20px;
      font-family:Verdana;
      text-align:left;
      background: url(images/button.png) no-repeat 0 0;
      width: 40px;
      height: 40px;
      text-decoration:none;
      color:#fff;
 
 
}
a:hover
{
      background-image:url(images/button_over.png);
}

 

[Dockmodus]

a
{
      display:block;
      font-size:20px;
      font-family:Verdana;
      text-align:left;
      background: url(images/button.png) no-repeat 0 0;
      width: 40px;
      height: 40px;
      text-decoration:none;
      color:#fff;
 
 
}
a:hover
{
      background-image:url(images/button_over.png);
}

Und wehe, deine eingesetzte width- u. height-Regel stimmt nicht :suspekt:

 

[hoctar]

Und "no-repeat 0 0"! Nicht vergessen