CODEWITHSUNDEEP
javascriptjquery
user1040899
user1040899

Reputation: 534

jquery background-position-x issue

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.

Upvotes: 4

Views: 16919

Answers (3)

user56reinstatemonica8
user56reinstatemonica8

Reputation: 34134

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

Upvotes: 9

moluv00
moluv00

Reputation: 374

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.

Upvotes: 0

elclanrs
elclanrs

Reputation: 94131

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.

Upvotes: 3

Related Questions