0

I am trying to stack background images using only one div container and making sure their position is related to the screen height. The issue is I can't seem to alter comma separated CSS values. Here is how I logically thought it would work.

 jQuery(document).ready(function() {
    windowHeight = window.innerHeight;
    jQuery("#home-bg.bg-1").css('background-position-y', '0, ' + windowHeight);
});
Master Splinter
  • 99
  • 1
  • 9

3 Answers3

0

You should add px at the end:

jQuery("#home-bg.bg-1").css('background-position', '0, ' + windowHeight+'px');
Arber Sylejmani
  • 2,078
  • 1
  • 16
  • 20
  • Yes, I just had it as a global variable. That was it I just missed the px at the end thanks! Now I just need to figure out the math to get the positioning right. :) – Master Splinter Jan 31 '15 at 00:19
0

background-position-y only takes one value. It should not be comma separated. You may be confused with background-position which takes two values, x and y position.

Try this:

jQuery(document).ready(function($) {
    windowHeight = window.innerHeight;
    $("#home-bg.bg-1").css('background-position-y', windowHeight);
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
0

You should use background-position and set both values. Don't use background-position-y. See here why.

If you still want to use it, then you have to remove 0,, because background-position-y only takes 1 argument and don't forget to add px to the value.

Community
  • 1
  • 1
Christoph Werner
  • 141
  • 1
  • 6