Change background position with jQuery

Question

I'd like to change the background position of a CSS-class while hovering a li-element.

HTML:

<div id="carousel">
    <ul id="submenu">
        <li>Apple</li>
        <li>Orange</li>
    </ul>
</div>

CSS:

#carousel { 
    float: left;
    width: 960px;
    height: 360px;
    background: url(../images/carousel.png);
}

Any suggestions on how to do this?

score 46 · Accepted Answer · edited Dec 02 '13 at 19:55

46

Here you go:

$(document).ready(function(){
    $('#submenu li').hover(function(){
        $('#carousel').css('background-position', '10px 10px');
    }, function(){
        $('#carousel').css('background-position', '');
    });
});

edited Dec 02 '13 at 19:55

Matthew Dresser

11,273
11
76
120

answered Nov 21 '09 at 22:31

rebellion

6,628
11
48
79

20

What is a valid value of `newValue`? Is it a string? What format is it in? – Drew Noakes Sep 09 '10 at 17:58
He is changing the 'css property backgroundPosition', more details here: http://www.w3schools.com/css/pr_background-position.asp – Jakub Sep 09 '10 at 18:02
@Neil Updated Jakub's URL for w3schools background-position: [http://www.w3schools.com/cssref/pr_background-position.asp](http://www.w3schools.com/cssref/pr_background-position.asp). That explains what valid values of newValue could be. – Zappa Aug 10 '12 at 11:38
1

Typically it's a string like this: `5px 10px` where the first value is **left** offset then the second is **top** offset. `%`, `em` etc are all fine as well as `px`. Don't forget that since it *pushes* the image in the container left and down, you want negative values unless you want the image to wrap around to the other side. – user56reinstatemonica8 Jul 22 '13 at 11:08

score 27 · Answer 2 · edited Sep 09 '10 at 17:57

27

You guys are complicating things. You can simple do this from CSS.

#carousel li { background-position:0px 0px; }
#carousel li:hover { background-position:100px 0px; }

edited Sep 09 '10 at 17:57

Drew Noakes

300,895
165
679
742

answered Apr 11 '10 at 12:10

Marius Iordache

271
3
2

15

@meo I am so tempted to say "Who cares?" but Argh. IE6. – Christopher Altman Sep 13 '10 at 14:47
15

IE6 is finally dead, even MS don't care about it – Neil Jul 05 '12 at 15:49
5

Everyone knows that IE6 is satan incarnate. Anyone still using IE6 is either a companion to evil or a government employee. – David Sep 21 '13 at 22:37

score 5 · Answer 3 · answered Apr 18 '13 at 17:20

5

rebellion's answer above won't actually work, because to CSS, 'background-position' is actually shorthand for 'background-position-x' and 'background-position-y' so the correct version of his code would be:

$(document).ready(function(){
    $('#submenu li').hover(function(){
        $('#carousel').css('background-position-x', newValueX);
        $('#carousel').css('background-position-y', newValue);
    }, function(){
        $('#carousel').css('background-position-x', oldValueX);
        $('#carousel').css('background-position-y', oldValueY);
    });
});

It took about 4 hours of banging my head against it to come to that aggravating realization.

answered Apr 18 '13 at 17:20

Loren

3,476
3
23
15

1

That works in some browsers, but not Firefox: [background-position-x is not standard css and is not supoprted in all browsers](http://stackoverflow.com/questions/9511104/jquery-background-position-x-issue) - e.g. Firefox just ignores it even in jQuery v2, [see this demo](http://jsbin.com/ivupuj/2/edit) – user56reinstatemonica8 Jul 22 '13 at 11:04
[Here's something similar that does adjust either x or y cross browser](http://stackoverflow.com/a/18515087/568458) – user56reinstatemonica8 Aug 29 '13 at 15:36

score 3 · Answer 4 · answered Nov 21 '09 at 22:11

3

$('#submenu li').hover(function(){
    $('#carousel').css('backgroundPosition', newValue);
});

answered Nov 21 '09 at 22:11

Ben Shelock

20,154
26
92
125

1

Actually incomplete. Doesn't reset backgroundPostion when hovering stops. As it doesn't do that, also doesn't consider that there already might be meaningful value set for backgroundPosition which needs to be restored – jitter Nov 21 '09 at 22:28
Well thats all he asked for Jitter. – Ben Shelock Nov 21 '09 at 23:33
1

No. Reread question: "while hovering a li-element." Which to me implies "I want it reset when hovering stops" – jitter Nov 22 '09 at 10:25
3

No it doesn't jitter. If it said "while hovering a li-element. Then I want it reset when hovering stops" Then it would imply what you meant. Sorry to be so petty, however that comment you left months ago really pissed me off. – Ben Shelock Jan 15 '10 at 17:59

jitter · Answer 5 · 2009-11-21T22:26:41.413

Sets new value for backgroundPosition on the carousel div when a li in the submenu div is hovered. Removes the backgroundPosition when hovering ends and resets backgroundPosition to old value.

$('#submenu li').hover(function() {
    if ($('#carousel').data('oldbackgroundPosition')==undefined) {
        $('#carousel').data('oldbackgroundPosition', $('#carousel').css('backgroundPosition'));
    }
    $('#carousel').css('backgroundPosition', [enternewvaluehere]);
},
function() {
    var reset = '';
    if ($('#carousel').data('oldbackgroundPosition') != undefined) {
        reset = $('#carousel').data('oldbackgroundPosition');
        $('#carousel').removeData('oldbackgroundPosition');
    }
    $('#carousel').css('backgroundPosition', reset);
});

Change background position with jQuery

5 Answers5

Linked

Related