javascript - Background position image overlay (Works in IE, not in Mozilla/Chrome/Safari) -
I have been having an issue in the background image position using the following jquery background position commands 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, on the left side of the screen, the liquid on the left blurred behind the contents of the main page. It is obtained by using 2 fluid images, one completely sharp and one completely blurred. As the user changes the window size, a jquery function calculates the exact state of the blurred image (set as background image) and edits the background page css attribute.
The X position of the image is dynamically calculated window size and position Y is constant. CSS is being corrected (note the background position on the right side in the most text box). However, the background image I am attempting to overlay is absent in Mozilla / Chrome / Safari. See jscript code below:
$ (window). Reset (function () {// Image position variable var varwinwidth = $ (window). Width (); var imgwidth = $ ('#imgFluid'). Width (); var offset = $ ('#dvfldblur') offset (); // Calculate and Position BlurPosition Lift = (WindowWidth - IMGwidth) - Offset.bound; $ ('#difflublur') CSS ({Background.position: blurPositionLeft + 'px' + '30px'}); // Debug: Background position of the actual CSS's background position $ ("#txtActualBackgroundpos"). Val (document.getElementById ("divFluidBlur") style .backgroundPosition);}
help you In advance Thanks,
Andrew
What you're doing should work. You can try a cleaner version: $ ('# divFluidBlur'). Css ('background-position', blurPositionLeft + 'px' + '30px'); and you temporarily disable other style values You may want to use Firebug to change which can be.
Can you personalize an online instance of the problem?
Comments
Post a Comment