Background position image overlay (Works in IE, not in Mozilla/Chrome/Safari)
- by amm229
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
