Bild im Menü anpassen

Moin,

ich habe folgendes gemacht:

Details:
Menüeintragstyp: URL
Link: #

Linktyp:
Bild zum Link: xyz.png
Menütitel hinzufügen: Nein
Im Menü anzeigen: Ja

Der Eintrag ist ein Untereintrag eines Haupteintrags. Verwendet wird ein hover Menü, wenn man mit der Maus über den Haupteintrag fährt, (tut es ihm weh ) und es das Untermenü mit dem oben beschriebenen Eintrag wird angezeigt.

Das Problem ist jetzt, dass das Bild zu klein angezeigt wird und man es daher nicht erkennen kann. Wie kann ich die größe festlegen? Egal welche Auflösung das Bild hat, es wird immer auf die gleiche Größe reduziert. Kann man da schon etwas in den Optionen des Menüeintrags definieren? Evtl unter CSS-Bildstil? Meine Vermutung wäre sonst die template.css.

Einen Link zur Seite kann ich nicht liefern, da es sich um ein Intranet handelt.

Bin dankbar für jede Hilfe!

Freundliche Grüße

hhh

"Einen Link zur Seite kann ich nicht liefern, da es sich um ein Intranet handelt."

Ich verwende das Template protostar.

Wenn ihr irgendwas bestimmtes braucht kann ich versuchen euch das zu liefern. Die Seite allerdings wie gesagt nicht.

Vielen Dank für eure Antworten, vorallem das mit der user.css ist sehr hilfreich!

Ich habe einen Weg gefunden, in der user.css habe ich nun folgendes css:

.item-182 a:before {
    content: url("http://intranet/images/bild.png");
    display: block;
}

(item-182 ist der Menü-Eintrag mit dem Bild)

Jetzt würde ich noch gerne, wenn man mit der Maus über das Bild fährt den Wechsel der Hintergrundfarbe ausschalten oder auf die gleiche Farbe wechseln lassen.
Im Anhang dazu ein Bild. Der Blaue Rahmen nervt.

Das sollte natürlich nur für diesen Eintrag überschrieben werden, bei den anderen Menü-Einträgen sollte der Wechsel der Hintergrundfarbe bestehen bleiben.

Ist nicht das wichtigste, möchte allerdings jetzt einfach wissen wie ich das ändern kann.

In der template.css habe ich jede menge dazu gefunden, was dort theoretisch (aus meiner Sicht) mit reinspielen könnte, quasi von Zeile 2060 bis 2071 und 2975 bis 3120 und bei 7473. Aber wie spreche ich denn nun genau nur das eine Item an und nicht alle Menüeinträge gleichzeitig?

Mir fehlen da wohl einfach auch ein bisschen die CSS fähigkeiten..

Danke!

Danke für die Antwort Axel, ich habe schon zuvor dort hineingeschaut, allerdings kann ich da nichts finden, was mit meinem Problem zutun haben könnte.

<li class="item-179 deeper parent"><a href="#"><img src="/joomla30/images/icons8-settings.png" alt="Settings"></a><ul class="nav-child unstyled small"><li class="item-182"><a href="#">&nbsp;</a></li>

Dieses Element:

Element {
}
.navigation .nav-child {
    position: absolute;
    top: 95%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.2);
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}
ul.unstyled, ol.unstyled {
    margin-left: 0;
    list-style: none;
}
.small {
    font-size: 11px;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0;
}
ul, ol {
    padding: 0;
    margin: 0 0 9px 25px;
}

Die Zeile "background-color: #fff;" ändert nur die dauerhafte Hintergrundfarbe, allerdings nicht die, die durch den hover-effekt genutzt wird.

In welcher Datei werden denn die Klassen "item-182" und "nav-child unstyled small" definiert? Ich denke dort werde ich die Lösung finden.

Sooo ich habe das Problem lösen können.

In der Template.css habe ich folgenden code gefunden:

.navigation .nav-child li > a:hover,.navigation .nav-child li > a:focus,.navigation .nav-child:hover > a {    text-decoration: none;    color: #fff;    background-color: #005e8d;    background-color: #005783;    background-image: -moz-linear-gradient(top,#005e8d,#004d74);    background-image: -webkit-gradient(linear,0 0,0 100%,from(#005e8d),to(#004d74));    background-image: -webkit-linear-gradient(top,#005e8d,#004d74);    background-image: -o-linear-gradient(top,#005e8d,#004d74);    background-image: linear-gradient(to bottom,#005e8d,#004d74);    background-repeat: repeat-x;    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005e8d', endColorstr='#ff004c73', GradientType=0);}

dann habe ich in der user.css den code eingefügt und tada! es gibt keinen sichtbaren hover effekt mehr bei dem element.:

.navigation .nav-child li > a.schriftgroesse:hover,
.navigation .nav-child li > a.schriftgroesse:focus,
.navigation .nav-child:hover > a.schriftgroesse {
    text-decoration: none;
    color: #fff;
    background-color: #fff;
    background-color: #fff;
    background-image: -moz-linear-gradient(top,#fff,#fff);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#fff));
    background-image: -webkit-linear-gradient(top,#fff,#fff);
    background-image: -o-linear-gradient(top,#fff,#fff);
    background-image: linear-gradient(to bottom,#fff,#fff);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005e8d', endColorstr='#ff004c73', GradientType=0);
}

ich bin die template.css einfach nach allen ":hover" elementen durchgegangen und habe bei den möglichen elementen getestet ob ein effekt auftritt wenn ich die farbe mit einer anderen ersetze. In Zeile 7469-7483 hatte ich dann endlich Erfolg!

Danke für eure Hilfestellungen!