How to retrieve the current background-image value of an element with IE6?

Question

This is a bit maddening. I have code which saves the current background-image from a selected element into a variable, which I then use to create an img tag.

Simply put, the following works in all browsers I've tested except IE6:

var bg = $('.element_selector').css('background-image');

The return value from IE6 is 'none', which is incorrect. (Before anyone suggests trying 'backgroundImage' instead of 'background-image', no dice.)

Any ideas on how I can get that value?

Update: I forgot to mention that the background image in question was processed by DD_belatedPNG, which now appears to be the culprit -- if I comment out the fix, I get my value. If anyone knows offhand how I could still fetch that value after the png fix is in, please let me know.

Answer 1

After some testing in IE6 I was able to reproduce your issue with DD_belatedPNG and background src.

Here's what I've found. If you set the background-image variable before calling DD_belatedPNG.fix('[selector]'); then you get the desired result. If you're setting it afterward for instance in a click event you get a value of "none".

Additionally, DD_belatedPNG adds an image element to the page containing your background image (with a class of DD_belatedPNG_sizeFinder), so you can potentially 1) re-use, 2) copy, or 3) take src attribute value from that element.

Here's my testing code:

CSS:

#myElement
{
    width: 515px;
    height: 341px;
    margin: 100px auto;
    background: #f00 url('http://www.chismbrothers.com/images/woodfloors.png') no-repeat 0 0;
}

HTML:

<div id="myElement"></div>


<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>

jQuery:

$(document).ready(function() {
    // Works as expected
    var bg = $('#myElement').css('background-image');
    $('#test1').text("pre png fix: " + bg);

    DD_belatedPNG.fix('#myElement');

    $('#myElement').click(function() {
        var bg = $(this).css('background-image');
        var bgAll = $(this).css('background');

        // This yields values of 'none' for bg and 'undefined' for bgAll
        $('#test2').html("post png fix: " + bg + "<br />bg: " + bgAll);

        // DD_belatedPNG creates an image element on the page with a class of 
        // 'DD_belatedPNG_sizeFinder' which can be used to get the image src
        $('#test3').html('dd_belatedpng_sizeFinder: ' + $('.DD_belatedPNG_sizeFinder').attr("src"));

        // Perhaps reapplying 'zoom' css will reapply the BG values?
        $(this).css({ zoom: 0 }).css({ zoom: 1 });
        // Set values again.
        bg = $(this).css('background-image');
        bgAll = $(this).css('background');
        // No luck...same result as #test2
         $('#test4').html("post png fix: " + bg + "<br />bg: " + bgAll);
    });
});

Answer 2

1. Have you tried background?
2. Are you sure the element is right?