I need to implement a multi- if...else if...else statement in a jQuery plugin for a responsive parallax background image and its position.

The code I have so far is:

Code:
if ($thirdBG.hasClass("inview")){
  //call the newPos function and change the background position
  $thirdBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 2550, 0)});
  //$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1550, 0.3)});
  if (current_width < 960) {
    bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
  }
  else if (current_width < 768) {
    bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
  }
  else if (current_width < 480) {
    bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
  }
  else if (current_width < 320) {
    bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
  }
  else {
    bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 4910, 0.2)});
  }
  //bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 4910, 0.2)});
  //call the newPos function and change the second background position
}
However, that isn't exactly what I want. This code defines if a width is less than a certain size. I would like it to say something like

Code:
if (current_width > 320 and < 480) {
  bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
}
What I want is basically:

Display bg3 at position X for the following size ranges:

Greater than 320 but less than or equal to 480
Greater than 480 but less than or equal to 768
Greater than 768 but less than or equal to 960
Greater than 960

Not sure of what the syntax would need to be.

And is there a more efficient way of writing that code than the multiple if...else if...else statements I have?

Finally, I was wondering how I can echo back the current vertical scroll position on screen so I can get an idea of where to position the images without having to save and reload the page 1000 times.