javascript - JS/jQuery modifies the CSS property set -

running following jquery bit changes actual css properties applied dom element. why so?

jquery("<div></div>")   .css("background-image", "url(http://a.com/a.jpg)")   .css("background-size", "cover")   .css("background-position", "center center")   .css("background-repeat", "no-repeat")   .attr("style") 

the above produces output (center has been changed 50%):

background-image: url("http://a.com/a.jpg"); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; 

i tried same thing using plain js, , still modifies value:

document.getelementbyid("a").style.backgroundposition = "center center" 

why happen? there solution this?