How to do background-position-x in Jquery ?

console.log($('.element').css('background-position-x'));

Outputs (an empty string)

console.log($('.element').css('background-position'));

Outputs 0px 0px

What I want to do is:

$(this).css('background-position-x', '-162px');

How to make it work ?

Thank you very much.

How to do background-position-x in Jquery ?

console.log($('.element').css('background-position-x'));

Outputs (an empty string)

console.log($('.element').css('background-position'));

Outputs 0px 0px

What I want to do is:

$(this).css('background-position-x', '-162px');

How to make it work ?

Thank you very much.

• javascript
• jquery

• You want to get the value or set the value for it? – Sarfraz Commented Mar 1, 2012 at 5:33
• Set a value, but if I can't get it it's hard to set, if I try to set it it doesn't work. – user1040899 Commented Mar 1, 2012 at 5:34
• I don't think background-position-x is a standard and hence may be its not supported by the browser you are using to test. – Chandu Commented Mar 1, 2012 at 5:35

3 Answers 3

Basically you get and set .css('backgroundPosition'), which is a string with a space seperating x and y, for example 12px 14px.

Tested in Firefox, Chrome/Safari, Opera, IE7, IE8:

Get it

If you want only background-position-x from jQuery:

var bpx = $('elem').css('backgroundPosition').split(' ')[0];

If you want only background-position-y from jQuery:

 var bpy = $('elem').css('backgroundPosition').split(' ')[1];

If you want both background-position-x and background-position-y from jQuery:

var bp = $('elem').css('backgroundPosition').split(' ');
var bpx = bp[0], bpy = bp[1];

Set it

(if you need animation, see Background Position animation in jQuery not working in Firefox)

To set background-position-x only without changing background-position-y:

var bpy = $('elem').css('backgroundPosition').split(' ')[1];
$('elem').css('backgroundPosition', '-192px ' + bpy);

To change or increment background-position-x only, based on its old value - for example, increase background-position-x by 5px:

(this simple example assumes it's a pixel value, and not something else like a percentage)

var bp = $('elem').css('backgroundPosition').split(' ');
var newBpx = (parseFloat(bp[0]) + 5) + 'px', bpy = bp[1];
$('elem').css('backgroundPosition', newBpx + ' ' + bpy );

background-position-x is not standard css and is not supoprted in all browsers. Take a look at solution at Background Position animation in jQuery not working in Firefox.

The output of

$('elem').css('backgroundPosition');

or more specifically

console($('elem').css('backgroundPosition');

sent to the console will be something like

elem.backgroundPosition 50% 0%

Where both the x- and y-values are assigned. To assign the new values in Firefox, you would have to use something like

$('elem').css('backgroundPosition','50% 50%');

More likely, if you need to set a pixel dimension then you might have something that looks like

$('elem').css('backgroundPosition','50% -100px');

Which would shift your background image up (negative y-direction) one-hundred pixels.