Bild zentriert, auch oben und unten

Du kannst auch durchaus einen Link zu einem Block-Element machen und ihm feste Höhe und Breite geben und dem dann ein Hintergrundbild geben
Im Sinne der Semantik und der Barrierefreiheit allerdings bitte in den Link ienen Text setzen und den rausschieben (z.B. per span).

Grüße
Laura

Zitat von "Bladz"

Ich will auf meiner Seite ein weiterleitendes Bild haben, quasi als Intro.

Tust du dem Internet bitte einen Gefallen und lässt das? Das ist absolut unnötig und deprimiert viele BEsucher die auf deine Seite wollen, also absolut überflüssig und hinderlich, in Fernsehsprache ausgedrückt ist es einfach Bullshit

Lösbar wäre es so:

<a href="#">
    <span>Zur Startseite</span> <!-- Dieser Teil ist z.B. fuer Suchmaschinen wichtig
                                     und wird einfach per CSS versteckt. -->
    <img src="verz/img.png" alt="Zur Startseite" title="Zur Startseite" /> <!-- alt= falls das Bild nicht angezeigt werden kann
                                                                    title= erscheint wenn du mit der Maus &uuml;ber
                                                                    das Bild gehst  -->
  </a>

* {
  margin: 0;  /* Abstände für alle Elemente auf 0 setzen */
  padding: 0;
}




html, body {
  height: 100%; /* damit der Link auch 100% hoch wird */
}




a {
  display: block; /* damit das Bild komplett zentriert wird */
  height: 100%;
  text-decoration: none; /* um die unterstreichung im FF zu verbergen */
}




a span {
  position: relative;
  left: -999em;
}




a img {
  position: absolute; /* damit wir per left/top positionieren können */
  display: block;
  width: 150px; /* breite des Bildes (wichtig!!) */
  height: 200px; /* höhe des Bildes (wichtig!!) */




  /* hier wird es wichtig: */
  top: 50%;
  margin-top: -100px; /* erst 50% nach unten schieben und dann
                         um die Hälfte der Höhe des Bildes wieder nach oben */
  left: 50%;
  margin-left: -50px; /* das selbe mit links */
}

Okay ich bin beruhigt

Gerne doch, bei Fragen weißt du bestimmt was du tun kannst

Wir schließen hier auch nicht, vielleicht hat später noch mal jemand eine Frage, was genau hast du denn nicht verstanden, also wo ist Klärungsbedarf?

Die andere Variante - braucht man oft z.B. auch bei Navigationen, die über Bilder funktionieren, wäre das ganze über ein Hintergrundbild zu lösen, indem man den img-Tag rausnimmt.
Somit hast du lediglich folgende Konstruktion):

<a><span>Linktext</span></a>

Um es mal zu verkürzen.
Anschließend einfach dein Hintergrundbild definieren und positionieren (du sagtest ja, du wüsstest wie das ginge).
Anschließend den Text durch Ansprache des span-Tags wie oben im Code rausschieben.

Ist für mich persönlich eine einfachere Lösung und eventuell etwas einfacherer zu verstehen

LG

So ich entschuldige mich für den unnötigen Mehrcode, so geht es natürlich auch und ist "besser":

<a href="#">
    <span>Zur Startseite</span>
  </a>

* {
    margin: 0;
    padding: 0;
  }




  a {
    position: absolute;
    display: block;
    width: 100px; /* Breite des Bildes */
    height: 200px; /* Höhe des Bildes */
    background: transparent url(link/zumBild.jpg) top left no-repeat;




    top: 50%;
    margin-top: -100px; /* -(halbe Höhe des Bildes) */
    left: 50%;
    margin-left: -50px; /* -(halbe Breite des Bildes) */




    text-decoration: none;
  }




  a span {
    position: relative;
    left: -999em;
  }

Natürlich müssen bei margin-top: ; und margin-left: ; noch Innenabstände berücksichtigt werden, sprich ein mal den Innenabstand (padding: drauf rechnen!