Background offset from bottom with jquery

Question

I'm trying to write a script with jquery that substitutes the CSS calc() function for browser compatibility. What I'm trying to rewrite is background-position: center calc(100% - 80px);

My attempt was somewhat like this:

$(window).resize(function () {
    $('#element').css('background-position', 'center 100%').css('background-position', '-=80px');
});

but then what do I substract from, the first or the second value? I needed help on that, couldn't think of any possible solution :/

EDIT

To make it more clear, I was trying to have my background image positioned 'center bottom' with 80px y-axis offset, '100%' in this case equals 'bottom'.

ONE MORE EDIT

So finally, I found out.

For this to work, we need to have an img element somewhere on the page with display:none, containing the background image in original width. Let's give it an ID #referrer. We could as well create it with jquery and set the img's src to the element's background image, but it's rather complicated, we'd need to get the background image url from the DOM's CSS, so we just create it manually.

like this:

<img src="our-img.png" style="display:none;" id="referrer" />

then we can call this function when needed (in my case on window resize)

function larg() {
    foo = $('#element').height() - $('#referrer').height();
    $('#element').css('background-position-y', foo + 'px');
};

That's how we make the image's bottom aligned with the element's bottom. Now all we need to do to make an offset is add the numeric value of offset pixels to foo.

We can modify our function to take an argument, so we don't have to modify it everytime we change our offset.

function larg(bar) {
    foo = $('#element').height() - $('#referrer').height() + bar;
    $('#element').css('background-position-y', foo + 'px');
};

Then we can call it basically from anywhere, in this fiddle, it's called by buttons onClick after resizing the div like this:

<button onClick="$('#element').css('height', '300px');larg(-80);">300/-80</button>

Note that it's not universal and works only if the background image is in original size.

FINAL EDIT

Don't ask me why didn't I know it.

background-position: center bottom 80px;

But I wrote a rather cool piece of code, right? This line of CSS doesn't work in IE8, therefore the code is useful, though minimally.

Answer 1

if you want to be sure about parameter, you can use background-position-y only (not far all browsers)

(you can even simply add 80px transperent margin directly to your picture and always use background-position: center bottom; in css)

FINALLY I made working demo with unusual solution

$('#slide').css('background-position', 'center bottom 80px')