0

I am hoping someone could help me understand why the jQuery .css() (v1.11) method is returning 0% 0% for elements that have a non-overridden background position defined (in the inspector while running and in the style sheet).

What I found a bit puzzling is why when I force an !important on the rule it gets picked up... but only then.

The jQuery:

;(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:

#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/);
  }

And finally, the markup (jade):

main 
    h1 This is a parallax scrolling demo
    div#test1 test1
    div#test2 test2

Here is the demo that alerts the background coords on load, note the lack of the !important this time. jQuery alerts a 0% 0% background position in this case. Hmmm..

http://codepen.io/nicholasabrams/pen/qEVbpd

Now the only difference in the demo below to the one above is that the background position on #test1 and #test2 have hade an !important flag added to them, and you guessed it this time jQuery finds the position as expected and returns the value.

http://codepen.io/nicholasabrams/pen/ogoLyV

Thanks everyone let me know if I can elaborate in anyway!

Nicholas Abrams
  • 33
  • 5

1 Answers1

2

Because you are setting the background image after the background position, but you are using the shorthand "background" which sets all of the background attributes, including background-position.

Use:

background-image: url(http://placehold.it/450x250);

instead.