Internet Explorer background-position css value with jQuery is broke?

Posted on by

Ok, so finally the medixbox menus are coming together, they slide up, slide down, show the right state and all the other nitty gritty associated with prettiness. Quick launch IE tester. KAbbooom!!! “(‘background-position’) is undefined” or some other useful crap is spouted forth.

Now I am in love with JQuery, like everyone else. I’ve had my fair share of JavaScript woes over the years and using JQuery is like putting lipstick on a pig and actually looking nice.

Several coffees and expletives later it turns out Internet Explorer  in all its reincarnations doesn’t seem to know what “background-position” is and instead retrieves its own “background-position-x” and “background-position-y” css rule. That’s all very nice and good but it means my code now has to have this:

function determine_x_pos(obj){
//parameter obj is something like $('#my-div')
    var pos = $(obj).css("background-position");
    if (pos == 'undefined' || pos == null) {
        pos = $(obj).css("background-position-x"); //die in hell
    } else {
        pos = pos.split(" ")[0];
    }
    return pos  || 0; //yes returning a 0 on fail  is bad but its for demo!
}

In true NastyHabit fashion, the code is shit. Nevertheless, it works a treat!

The paranoid guy in me believes this cursed issue only afflicts me. Please check if you too have been burdened by the beast of redmond and help a fellow man feel less picked on by the curse of IE.

16 thoughts on “Internet Explorer background-position css value with jQuery is broke?”

  1. I’ve been bitten by this too and I’ve only been learning jQuery for a few days. Did you ever get a satisfactory fix? IMO this is something that a) should be fixed by the browser manufacturer and b) until then abstracted away in a framework. Still not fixed in IE8 either…

    Reply ↓

  2. Pingback: graham.reeds/ » So where is the background?

  3. hi there,

    i had more success with this:

    if ($(this).css(‘background-position-x’)) {
    var pos = parseInt($(this).css(‘background-position-x’).split(‘ ‘)[0]);
    } else {
    var pos = parseInt($(this).css(‘background-position’).split(‘ ‘)[0]);
    };

    Reply ↓

    • hi, I elaborated a bit on Christof’s solution and came up with this:

      $.fn.bgx = function(x){
      if(null == x){
      if ($(this).css('background-position-x')) {
      return $(this).css('background-position-x');
      } else {
      return $(this).css('background-position').split(' ')[0];
      };
      }else{
      y = $(this).bgy();
      $(this).css('background-position', x+' '+y);
      return $(this);
      }
      };
      $.fn.bgy = function(y){
      if(null == y){
      if ($(this).css('background-position-y')) {
      return $(this).css('background-position-y');
      } else {
      return $(this).css('background-position').split(' ')[1];
      };
      }else{
      x = $(this).bgx();
      $(this).css('background-position', x+' '+y);
      return $(this);
      }
      };

      it’s a small plugin for jquery, whichh lets you set and read background x or y position without worrying about IE. also it makes setting only x or only y easier (you don’t have to porduce the complete string for background-position, only the coordinate you want to change). also it supports chaining and % based values. so you can call it like this:

      $('#someElement').bgy('100px');

      or chain like this (and use/mix % based values):

      $('#someElement').bgx('100px').bgy('20%');

      Reply ↓

  4. Hi Christof thanks for that looks like a much simpler solution. I see its 2009 and we’re still talking about this issue!

    Reply ↓

  5. Thanks for this information!
    But its really weird that I can change the “background-position” without the “-x”?!
    $(this).css(“background-position”, “-50px 200px”); works great.

    Nice IE…

    Reply ↓

  6. Oh, no ! Another working half-day lost because of IE 😦
    After dealing with CSS IE variations, i thought javascript part would be less a nightmare. Fortunately IE8 has a nice built-in debugging tool, but still…

    Reply ↓

    • Unlucky Milhouse. Like every cloud, your discovery of the IE8 debugging tool was your silver lining. However I struggle to use the IE8 development tool considering how advanced firebug is. Everything else feels too clunky including Opera’s dragonfly and even the chrome/safari debugging tool. I suppose old habits die hard 🙂

      Reply ↓

  7. Thank you thank you! I was wondering what the heck was going on with that css background-position selector in IE for jQuery! (Only took me 30 mins over half a day – thankfully)

    Reply ↓

  9. Thanks, I had the same problem and this idea helped me. Actually I had to test like this instead of checking undefined:

    if (!pos) {
    // IE8 shit
    } else {
    // proper stuff
    }

    Reply ↓

Leave a reply to Matthias Cancel reply