Reputation: 534
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
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:
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];
(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
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
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