jquery background-position-x issue

Question

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.

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, Mar 01 '12 at 05: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, Mar 01 '12 at 05:35

score 9 · Answer 1 · edited May 23 '17 at 10:30

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

score 3 · Accepted Answer · edited May 23 '17 at 12:26

3

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.

edited May 23 '17 at 12:26

Community

1
1

answered Mar 01 '12 at 05:35

elclanrs

92,861
21
134
171

Ok, I'm on firefox, that explains why. Thank you, Do you have an idea how to do it ? – user1040899 Mar 01 '12 at 05:38
Just copy/paste the script on that solution and use it like you would normally do. – elclanrs Mar 01 '12 at 05:38
Ok thank you very much, but I'm going to do something a bit lighter. – user1040899 Mar 01 '12 at 05:47

score 0 · Answer 3 · answered Apr 05 '13 at 18:37

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.

jquery background-position-x issue

3 Answers3

Get it

Set it

Linked