0

I'm trying to rework a bit of code to make a background image shrink when you scroll over it in the browser. The code I've been given currently does the opposite - it starts the background at 0 and makes if grow. Here's my code:

$('#item').css('background-size', (posish(12800)*100) + '%');

So when the browser window gets to 1280px, I want the background to shrink. And the posish function just passes a true or false value, here it is for reference:

function posish(pos) {

    pos-=19;
    if (scrolled-viewport/4 < pos) {
        return false;
    } else if (scrolled > pos+viewport/2) {
        return true;
    } else {
        return (scrolled-viewport/4-pos)/(viewport/4);
    }
}

Does anyone know how I could reverse the initial function so the background starts at 100% and shrinks to 0% when posish is true - IE gets above 12800px? it currently does the opposite.

Thanks for any help

Adrift
  • 58,167
  • 12
  • 92
  • 90
Desmond
  • 1,656
  • 3
  • 22
  • 34
  • Just be aware that background size does work in IE8, although there are some hack/fix mentioned: http://stackoverflow.com/questions/4885145/ie-8-background-size-fix – bcm May 16 '13 at 00:35
  • Thanks bcm. Luckily this site doesn't need to work in IE8, makes things more fun!! – Desmond May 16 '13 at 01:19

1 Answers1

1

(100-(posish(12800)*100)) + '%'

CP510
  • 2,297
  • 15
  • 15