Could someone please explain why the jQuery .css() method is returning 0% 0% for elements with a background position defined in the inspector and style sheet?
I'm puzzled as to why adding !important to the rule makes it work, but not without.
The jQuery Code:
;(function stackoverflowExample(){
"use strict";
$('div').each(function(){
var origPos = $(this).css('backgroundPosition');
alert('original position: '+origPos); // Why?! false return value 0% 0%
// unless an !important used in the stylerule...
});
})();
The CSS Styles:
#test1, #test2 {
padding: 65px;
margin: 50px;
color: #fff;
font-size: 3rem;
text-transform: uppercase;
background-position: 500px 500px !important;
box-shadow: inset 1px 10px 10pc #000;
}
#test1 {
background: url(http://placehold.it/450x250);
margin-bottom: 900px;
}
#test2 {
background: url(http://lorempixel.com/b/1800/800/);
}
The Markup (jade):
main
h1 This is a parallax scrolling demo
div#test1 test1
div#test2 test2
In this demo, jQuery alerts a 0% 0% background position. Check out the lack of !important this time. Strange..
http://codepen.io/nicholasabrams/pen/qEVbpd
Now in the demo below, I've added !important to the background positions on #test1 and #test2, and lo and behold, jQuery now returns the correct values.
http://codepen.io/nicholasabrams/pen/ogoLyV
If you have any insights or need more clarification, feel free to let me know!