CSS ... kein Hexenwerk !

Ich habe hier mal einen css Code, um einen Hover-Effekt für ein Hintergrundbild zu bekommen!
Aber was genau passiert dann, wenn man diesen einfügt mit den jeweiligen Hintergrundbildern...

div.hovereffekt {
background: url("background-image.png") no-repeat;
height: 50px;
width: 100px;
}
 
div.hovereffekt:hover {
background: url("background-image-hover.png") no-repeat;
}
 

Also, wenn ich das jetzt richtig verstanden habe, müsste oben bei background-image.png das aktuelle Bild, was ich momentan im Header habe, rein und bei background-image-hover.png ein anderes meiner Wahl, um diesen Effekt, wie Du ihn hier vorgeführt hast, zu erzeugen?

Ich habe ja oben bei mir die Sonne im Header und wenn ich bei background-image-hover.png irgendein anderes
GIF oder Bild einfügen würde, was dann beim drüberfahren mit der Mouse wechselt, könnte ich das so machen?

Ok, diese Sonne habe ich bei Layout/Bilder & Hintergründe eingegeben...

Ja genau, die Sonne ist als Hintergrundbild nur für den Header!
Ansonsten habe ich für das Board 6 andere Hintergründe, wo man sich jeweils einen auswählen kann! Es geht mir um den Header, dass beim drüberfahren statt der Sonne irgendein Bild meiner Wahl erscheint, aber ansonsten die Sonne sichtbar ist, wenn man dort nicht drüberfährt, so wie Du es momentan im Header als Beispiel reingesetzt hast...

Das klappt, aber man muss schauen, an welcher Stelle man mit der Mouse drüberfährt und außerdem ist es auch noch nicht das passende Bild, aber da kann ich ja rumexperimentieren...

Kann man den Code denn auch noch abändern, so dass nicht dieser Hover-Effekt ist, sondern nacheinander 2 Bilder erscheinen? Also in meinem Fall die Sonne und dann ein anderes meiner Wahl!

für den Code und die Info! Ok, ich habe jetzt ein Bild auf fast die gleich Größe gebracht, das geht! Aber könnte man denn so einen css Code schreiben, so dass 2 Bilder wechseln? Die Sonne und ein anderes?