Наложение фонового изображения (работает в IE, а не в Mozilla / Chrome / Safari)

Question

У меня проблема с позиционированием фонового изображения с помощью следующей команды jquery background position в Firefox, Google Chrome и Safari.Код работает правильно в IE 8.

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

Желаемый эффект - непрерывный поток жидкости изправая сторона экрана слева, размыта за основным содержимым страницы.Это достигается с помощью двух плавных изображений: одно полностью резкое, а другое полностью размытое.Когда пользователь изменяет размеры окна, функция jquery вычисляет правильное расположение размытого изображения (устанавливается как фоновое изображение) и редактирует атрибут css backgroundposition.

Положение x изображения вычисляется динамически на основе окнаразмер и позиция у статичны.Кажется, что CSS правильно изменен (обратите внимание на отображение фона в самом правом текстовом поле).Однако фоновое изображение, которое я пытаюсь наложить, отсутствует в mozilla / chrome / safari.См. Код jscript ниже:

 $(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); }

Заранее благодарим за помощь,

Андрей

Answer 1

То, что вы делаете, должно работать. В любом случае, вы можете попробовать немного более чистую версию: $ ('# divFluidBlur'). Css ('background-position', blurPositionLeft + 'px' + '30px'); И вы можете захотеть использовать Firebug для временного отключения или изменения значений других стилей, которые могут быть вредными.

Не могли бы вы привести онлайн пример проблемы?