Twitter
Facebook
Delicious
Linkedin
jQuery (at least up till version 1.2.6) has a problem with Internet Explorer when asking the background-position of an object.
$('h1:first').css('background-position');
In the other A-grade browsers, you get 2 values (in px or %) representing respectively the x-position and y-position of the element. In Internet Explorer (6 and 7) you get undefined.
The problem is that IE doesn’t know what background-position is, it only knows 2 other calls: background-position-x and background-position-y. Here is a slice of JavaScript code to handle this problem.
(function($) {
jQuery.fn.backgroundPosition = function() {
var p = $(this).css('background-position');
if(typeof(p) === 'undefined') return $(this).css('background-position-x') + ' ' + $(this).css('background-position-y');
else return p;
};
})(jQuery);
You can now use this jQuery plugin to get the background-position of an element:
$('h1:first').backgroundPosition();
There is a ticket open in the jQuery Bugtracker about this isue, but it is weird that such a simple problem isn’t fixed already.
om 07:52
Hi, this fails for IE6 because of p === ‘undefined’ expression always returns false. Try instead:
if(typeof(p) == ‘undefined’)
This is tested to work in IE6.
-andrew
om 13:38
Thx Andrew!
om 06:58
Thank you for the info.
The current version(1.3.2) has’t fixed yet this issue but your code saved me!
om 04:23
Awesome!!
Dextro…
Made a set background position because yours was so good:
jQuery.fn.setBackgroundPosition = function(val) {
var p = $(this).css(‘background-position’);
var temp_pos_val_array=val.split(‘ ‘);
var x_val=temp_pos_val_array[0];
var y_val=temp_pos_val_array[1];
if(typeof(p) === ‘undefined’){
$(this).css(‘background-position-x’,x_val);
$(this).css(‘background-position-y’,y_val);
return true;
}else{
$(this).css(‘background-position’,val);
return true;
}
return false;
};
om 14:17
May return p.toString();
om 21:11
Simple:
var bkgOrigPos = $(this).css(“background-position”);
if(typeof(bkgOrigPos) == ‘undefined’) { bkgOrigPos = $(this).css(‘background-position-x’) + ‘ ‘ + $(this).css(‘background-position-y’) };
om 09:50
Thanks man, you have totally saved my head from being achy! (It already started getting achy
)
om 23:54
Excellent solution, I was pulling my hair why CSS background position wouldn’t resolve in IE. Thanks for nailing this down.
om 14:40
jQuery 1.4.2 and still not solved this problem…
om 12:34
You can SET the background-position simply like this (work for IE6+) :
$(this).css(“background-position”,x+”px “+y+”px”);
But you can’t READ the background-position…
(tested with jQuery 1.3.2)
om 04:10
Thanks, you saved my day!!
om 01:30
Thanks man! This still happen in jQuery 1.4.4. Weird!
om 21:34
Thanks, you saved my day!!(2)
om 01:42
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%’);
om 00:23
Thanks a lot man, This is still happening in v1.6.2.
IE is always a headache.
om 22:50
Hello,
I found this and think it’s cool.
The only problem is that your solution helps returning a value in IE, but still returning something different from other browsers, so I had to think in a solution which lets me use the same code for all browsers.
The solution is simple;
(function($) {
jQuery.fn.backgroundPosition = function() {
var p = $(this).css(‘background-position’);
//IE
if(typeof(p) === ‘undefined’){
return $(this).css(‘background-position-x’) + ‘ ‘ + $(this).css(‘background-position-y’);
}else{
//Others
if (p == “0% 0%”){
return “left top”;
} else if (p == “100% 0%”){
return “right top”;
} else if (p == “0% 100%”){
return “left bottom”;
} else if (p == “100% 100%”){
return “right bottom”;
}
}
};
Yes, if you work with other percentajes my solution doesn’t help. But for other cases, it helps simplifying the code.
GL!
om 11:36
I had to set the properties of background-position (fx, doesn’t eat background-position-y or -x). So created some code based on the first post to set the background properly.
(function($) {
jQuery.fn.setBackgroundPosition = function( x, y ) {
x = typeof x !== 'undefined' ? x : 0;
y = typeof y !== 'undefined' ? y : 0;
var p = $(this).css('background-position');
if(typeof(p) === 'undefined')
{
$(this).css('background-position-x', x +'px');
$(this).css('background-position-y', y +'px');
} else {
$(this).css('background-position', x + 'px' + ' ' + y + 'px' );
}
};
})(jQuery);
Call it using:
$('h1:first').setBackgroundPosition( x, y );