CSS Hintergrundbild input type button?

[hawkmaster1]

Hallo zusammen,

ich versuche einem normalen input type = button ein Hintergrundbild zu verpassen. Laut Mr. Google und stackoverflow bzw. dr.web soll das mit CSS gehen. Ich habe es so versucht:

<input name="datum_button" id="datum_button"  type="button" class="button" />

.button {
  background-image:url(image/calendar.png);
  cursor:pointer;
}

Es wird jedoch nie eine Grafik angezeigt. Geht das überhaupt mit einem input type=button?

PS: Ich möchte keinen input type="image" weil hier ja ein Submit ausgelöst wird. (und den möchte ich nicht)

vielen Dank

Gruss hawk

[Gunnar Bittersmann]

@@hawkmaster1

Es wird jedoch nie eine Grafik angezeigt. Geht das überhaupt mit einem input type=button?

Ja, geht. Stimmt vielleicht der Pfad zur Grafik nicht? (Der relative Pfad bezieht sich aufs Stylesheet, nicht auf die HTML-Datei.)

PS: Ich möchte keinen input type="image" weil hier ja ein Submit ausgelöst wird. (und den möchte ich nicht)

Du möchtest aber <button type="button">, kein input.

LLAP 🖖

[Christian Kruse]

Hallo hawkmaster1,

ich versuche einem normalen input type = button ein Hintergrundbild zu verpassen. Laut Mr. Google und stackoverflow bzw. dr.web soll das mit CSS gehen. Ich habe es so versucht:

<input name="datum_button" id="datum_button"  type="button" class="button" />

.button {
  background-image:url(image/calendar.png);
  cursor:pointer;
}

Es wird jedoch nie eine Grafik angezeigt. Geht das überhaupt mit einem input type=button?

Klar, geht. Mit den üblichen Einschränkungen (nicht alle Browser gestatten das umstylen von Controls unter allen Plattformen).

LG,
CK

[Matthias Apsel]

Hallo hawkmaster1,

Es wird jedoch nie eine Grafik angezeigt. Geht das überhaupt mit einem input type=button?

Klar geht das.

PS: Ich möchte keinen input type="image" weil hier ja ein Submit ausgelöst wird. (und den möchte ich nicht)

• Input oder Button? - Button!
• Button-Elemente mit CSS gestalten

Bis demnächst
Matthias

[Jörg Reinholz]

Moin!

background-image:url(image/calendar.png);

Oft keine wirklich gute Idee!

Manchmal hast Du eine URL wie

• http://example.com/test/seite.html

und manchmal eine wie

• http://example.com/seite.html

Wenn jetzt in beiden im css image/calendar.png angegeben wird, dann wird die Grafik mal als

• http://example.com/test/image/seite.html

und mal als

• http://example.com/image/seite.html

abgeholt, oder das eben nur versucht. Schaue in den Entwicklerwerkzeugen nach, ob die Grafik abgeholt und gefunden wird.

Jörg Reinholz

[Gunnar Bittersmann]

@@Jörg Reinholz

Wenn jetzt in beiden im css image/calendar.png angegeben wird, dann wird die Grafik mal als http://example.com/test/image/seite.html und mal als http://example.com/image/seite.html abgeholt

Nein.

LLAP 🖖

[Jörg Reinholz]

Moin!

Nein.

Du meinst nicht "Nein", sondern "nicht immer". Denn wenn das Stylesheet in der HTML-Datei mit drin ist, dann stimmt meine Aussage nämlich. Und so selten oder gar ausgeschlossen ist das gerade nicht.

Jörg Reinholz

[Gunnar Bittersmann]

@@Jörg Reinholz

Nein.

Du meinst nicht "Nein", sondern "nicht immer".

Ja, darauf können wir uns einigen.

LLAP 🖖

[hawkmaster1]

Hallo vielen Dank an alle. Es hat schon dauernd funktioniert nur wurde es durch eine CSS "width" Angabe in einem anderen Stylesheet nicht angezeigt. Jetzt geht es:

Danke euch

Gruss hawk