Background position image overlay (Works in IE, not in Mozilla/Chrome/Safari)

Posted by amm229 on Stack Overflow See other posts from Stack Overflow or by amm229
Published on 2010-06-13T21:42:08Z Indexed on 2010/06/13 22:02 UTC
Read the original article Hit count: 143

Hi all,

I am having an issue positioning a background image using the following jquery background position command in Firefox, Google Chrome, and Safari. The code works correctly in IE 8.

$('#element).css({ backgroundPosition: 'xpx ypx' });

The x position of the image is calculated dynamically based on window size and the y position is static. The css appears to be modified correctly, however, the background image I am attempting to overlay is absent. See jscript code below:

 $(window).resize(function () {
    // image positioning variables 
     var windowwidth = $(window).width();
     var imgwidth = $('#imgFluid').width();
     var offset = $('#divFluidBlur').offset();

     // calculate and implement position
     blurPositionLeft = (windowwidth - imgwidth) - offset.left;
     $('#divFluidBlur').css({ backgroundPosition: blurPositionLeft + 'px' + ' 30px' });

    // debug: display actual css Background Position of element to text box
     $("#txtActualBackgroundpos").val(document.getElementById ("divFluidBlur").style.backgroundPosition);

Thanks in advance for your help,

Andrew

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery