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.

Can you put your code on jsFiddle? – Jaspero Apr 13 '11 at 17:29 — Jaspero, Apr 13 '11 at 17:29

score 0 · Answer 1 · answered Apr 13 '11 at 16:51

0

Have you tried background?
Are you sure the element is right?

answered Apr 13 '11 at 16:51

meder omuraliev

183,342
71
393
434

Yes, and yes. The proper value for background-image is returned in all other browsers I've tried (IE7-8, FF, misc webkit). In IE6, css('background') returns undefined. – mattucf Apr 13 '11 at 18:44
I think I just figured it out. DD_belatedPNG appears to be the culprit, and I neglected to consider that it might be relevant. Now to figure out where the png fix is hiding my data. :) – mattucf Apr 13 '11 at 19:02

score 0 · Accepted Answer · answered Apr 13 '11 at 20:06

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);
    });
});

Moving the png fix to after the assignment caused a bit of heartburn, but it was the pragmatic solution (since I do a number of png fixes on that page). Thanks much! — mattucf, Apr 13 '11 at 22:02

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

2 Answers2