How to change multiple background-images' position on the same element with jQuery/Javascript

Question

$("#d_header-right-lower li." + navEl).css("background-image","url('/header/bg-nav.png'), url('/header/bg-nav-separate.gif')");
$("#d_header-right-lower li." + navEl).css("background-position","0 13px");
$("#d_header-right-lower li." + navEl).css("background-position","bottom center");
$("#d_header-right-lower li." + navEl).css("background-repeat","no-repeat, no-repeat");

I don't need bottom center for the second background-image (bg-nav-separate.gif) ; Is there a way to apply it only for the first background-image (bg-nav.png)

$("#d_header-right-lower li." + navEl).css("background-position (for first image only)","bottom center");

Answer 1

Try setting second parameter to background-position property to 0 13px at single call to .css() , with parameters separated by comma , ; removing second call to .css("background-position") . See Using CSS multiple backgrounds

.css("background-position","bottom center, 0 13px");

jsfiddle https://jsfiddle.net/rgwnye91/1/