help needed with dynamic background-position
Guys I'm trying to solve a IE-specific problem with transparent PNG's and P-elements which are 'Cufonized" to gave them a background. I'm using the cycle plugin (tried also innerfade but same problem) to do fade transitions with P-elements, which are replaced with Cufon-rendered fonts, and 2 transparent PNG's. IE has got the "black-border" bug, so it will not look neat.
Div#bokehHeader is 1920px wide and is aligned left in the browser. P-elements are centered in the browser. With resizing of the browser-window I want the background of the P-element to dynamically change to the overlap background of parents parent; div#bokehHeader.
At Cufon forum (font replacement) a guy, probably the developer of Cufon, explained me by giving a background-image the problem will be gone in IE. So as a jQuery-newbie
I coded this;
- $(function() {
- var parentOffset = $("div#bokehHeader").offset(); // background-image top:0, left:0
- var elementOffset = $("div#headerContent p").offset(); // parent is div which is centered in window with margin: 0 auto
- var bgRepoX = (parentOffset.left - elementOffset.left);
- var bgRepoY = (parentOffset.top - elementOffset.top); ;
- $("div#headerContent p").css({'backgroundPosition': + bgRepoX + 'px ' + bgRepoY + 'px'});
- });
I'm retrieving coordinates of property background-positioning with Chrome developertool @ Ubuntu 10.04 but coordinates keep changing between 3 values for left(x)and top(y) by refreshing the page, Firefox doesn't shift with pagerefresh. Background-image keeps shifting in the browser. further more I need to inject values with resizing of window. What's going on with the
shifting of background
and how do I refresh with resize of the browser-window?
[Edited aug 19th] See reply.