Question

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 desired effect is a continuous stream of fluid from the right side of the screen to the left, blurred out while behind the main page content. This is achieved using 2 fluid images, one completely sharp and one completely blurred. As the user resizes the window, a jquery function calculates the appropriate positioning of the blurred image (set as a background image) and edits the backgroundposition css attribute.

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 (note the backgroundposition display in the right most text box). However, the background image I am attempting to overlay is absent in mozilla/chrome/safari. 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

Answer 1

What you are doing should work. Anyway, you may want to try a little cleaner version: $(‘#divFluidBlur’).css(‘background-position’, blurPositionLeft + ‘px’ + ‘ 30px’); And you may want to use Firebug to temporary disable or change values of other styles that could be iterfering.

Could you privide an online example of the problem?