Question

#header{  
    height: 80px;
    padding-left: 208px;
    background-image: url("Trans.png"); 
    background-repeat: no-repeat;
} 
<div id="header">
<!--display something float to the right-->
</div>

How can I bind the background image onclick event?

$("#header").delegate(":image", "click", function() {
//this does not work
});

neither this work 🙁

$("#header:image").click(function() {}

TIA

Answer 1

a background-image is no element in the DOM – you can not bind an event to it.
why do you want to do that?

If you want to track clicks only on the non-repeating background – bind your event to the header and then get the x-y coordinates of the click do the math.

Or – add another div inside with the exact dimensions and position of your background, add the event (and maybe even the image) to that div.