9

I am trying to find the top and left coordinates of a background-image that by applying some CSS rules has been shifted off the viewport. Difficult to explain in words, here is a visual example:

Background-image shifted to the left

Black box: Viewport
Red box: <div> with a background-image
Blue box: <div> containing an <a>

When I do getBoundingClientRect of the <div> with the background-image, I get 0px 0px. It makes sense, because the container is within the viewport, and it starts at the very top and left.

However, the background-image of that <div> has been shifted to the left (and it could have been shifted to the top too), and therefore the coordinates should differ from the ones from the <div>. So my question is:

How would I READ (I don't want to change) How can I find the coordinates of the green point in any page that is facing this situation? I mean, the browser must have known how many pixels it needs to cut the background-image, right?

I am currently using Javascript to access the Web/Dom API. I am willing to use anything (undocumented maybe?) to achieve this.

Nobita
  • 23,519
  • 11
  • 58
  • 87
  • Have you tried calculating the width of the image, subtract from the width of the window, then divide by 2? If it's always centered, that should get the amount outside the window on each side. If the image is right-aligned, just subtract the two widths. – brouxhaha Nov 21 '13 at 18:16
  • @brouxhaha Thanks for your comment. This is just an example, I am trying to find a general solution to this. What if the background-image is not center, but is something else? – Nobita Nov 21 '13 at 18:20
  • 1
    That's a good question. The other problem I see, how do you access the background-image, or what if it isn't a background-image but an inline image? What if the divs around them are shrinking, causing the image to shrink? What if the image breaks the bounds of a containing div? What if is larger than the containing div, but overflow: hidden is set? There are a ton of variables for which to account. – brouxhaha Nov 21 '13 at 18:34
  • 1
    @brouxhaha Thanks for taking the time to comment. All those possibilities that you stated don't mean that the browser actually needs to find out the coordinates in order to render the element. I am just wondering how can I get those coordinates. Either way, if I find more problems, I will tackle them as they arise. – Nobita Nov 21 '13 at 18:38

2 Answers2

1

Here is a solution to your problem that works on modern browsers.

var testNode = document.getElementById('test');
var testBackgroundPosition = getComputedStyle(testNode,null).backgroundPosition.replace(/px/g,'').split(' ');

As you can see from the following page not all web browsers support this method.

http://caniuse.com/getcomputedstyle

There is no answer to the "Cross-browser (IE8-) getComputedStyle with Javascript?" question yet and I don't know another solution to this problem.

Without getComputedStyle() there is no reasonable way of getting the current style settings for an element since that requires going through all of the included CSS. It is possible but involves CPU intensive code. If you were to go that direction you will be able to create a temporary div inside the existing div with relative positioning, possibly setting top and left, or margins, to the values from the background position and then calculate where the div's clientTop and clientLeft ends up which may work in some cases.

Community
  • 1
  • 1
Ralph Ritoch
  • 3,260
  • 27
  • 37
-1

There is a css property for that: the background-position. Try the following code to retrieve the information asked for:

$('#divId').css('backgroundPosition');
falsarella
  • 12,217
  • 9
  • 69
  • 115
  • If you think with that attribute I can solve my problem, please define how would you do it to find a general solution. – Nobita Nov 21 '13 at 18:22