If a HTML element (e.g. div) has a CSS background image is it possible to assign an event handler that is triggered when the user clicks on the background image, but not any other part of the element?

If so, a JQuery example would be much appreciated.

If a HTML element (e.g. div) has a CSS background image is it possible to assign an event handler that is triggered when the user clicks on the background image, but not any other part of the element?

If so, a JQuery example would be much appreciated.

• javascript
• jquery

Share Improve this question Follow asked Nov 8, 2011 at 22:07 DónalDónal 188k177177 gold badges586586 silver badges844844 bronze badges 8

• There's probably an easier way to do it, but you could put another div behind with the click event on it. – jli Commented Nov 8, 2011 at 22:09
• Why not just assign the event to the element itself? Is the element bigger than the background image? – sdleihssirhc Commented Nov 8, 2011 at 22:11
• Background image is not part of the DOM. It's possible to write a jQuery function to read the CSS and detect if click event happened on the background or not. But it's not possible directly through DOM API – Mohsen Commented Nov 8, 2011 at 22:11
• Would we be correct in assuming the background image only takes up part of the div? – Mike Robinson Commented Nov 8, 2011 at 22:11
• 1 yes, background image is smaller than the div – Dónal Commented Nov 8, 2011 at 22:13

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 2

While it's not possible to detect a click on the background image, you can use some clever JS and CSS wizardry and e up with a masking element over the background image like this: http://jsfiddle/ahmednuaman/75Rxu/, here's the code:

HTML:

<div id="bg_img_1"></div>
<div id="bg_img_2">
    <div id="hit"></div>
</div>

CSS:

div
{
    display: block;
    position: relative;
    width: 200px;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center center;
}
#bg_img_1
{
    background-image: url('http://placekitten./100/100');   
}
#bg_img_2
{
    background-image: url('http://placekitten./100/100');   
}
#hit
{
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    background: #000000;
    opacity: .3;
    margin: 50px;
}

JS:

function handleClick(e)
{
    console.log(e.target.id);
}

$( '#bg_img_1' ).click( handleClick );
$( '#hit' ).click( handleClick );

I think there is a better and simple way to achieve this here is my solution

$(document).ready(function() {
$("*").click(function(event)
{
    if(event.target.nodeName == 'BODY')
    {
        alert('you have just clicked the body background');
    }
});

Here is a very basic code that only work in x axis to show it's possible with injection of an img element with background-image url value as it's src and detecting the background image height and width to calculate if click happened on background image or not.

This code needs tons of improvement. It doesn't work in y axis. Also background-position and background-size are not involved. But it's easy to add those futures.

Here is Fiddle:

And here is jQuery code:

$('#d').bind('click', function(e){
    var d = $(this),
        bg = {};
    //insert an image to detect background-image image size
    $('body').append(
        $('<img/>').attr('src',
                   d.css('background-image').split('(')[1].split(')')[0]
    ).attr('class', 'testImage'));
    bg.h = $('.testImage').height();
    bg.w = $('.testImage').width();
   console.log(bg, e.offsetX, $('.testImage').width());

    if(e.offsetX >  $('.testImage').width()){
        $('#l').text('it was NOT on background-image');
    }
    else{
        $('#l').text('it was on background-image');
    }
   $('.testImage').hide();
})