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: 166
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