4

I am working on a JavaScript animation library and ran into a problem: All values are usually returned in pixels using this default function:

window.getComputedStyle(element).getPropertyValue(property);

However, when getting the value for background-position like so:

window.getComputedStyle(element).getPropertyValue('background-position');

The result is 50% 50% (background-position: center). How can I convert the values to pixels? I wrote the following function, but it gives me the wrong result, the reason being is that percentages on background-position are also relative to the image size.

var pixelsX = (parseFloat(percentX) / 100 * element.offsetWidth) + 'px';
var pixelsY = (parseFloat(percentY) / 100 * element.offsetHeight) + 'px';

I also cannot get the size using Image() since the calculation has to happen in real time and I cannot wait for the image to load.

Thanks!

Ood
  • 1,445
  • 4
  • 23
  • 43
  • The problem is that in some cases I might know the size of the image and I need to calculate it without loading the image. – Ood Sep 12 '19 at 14:36
  • The position is relative to the container and to "background-size" which in my case is "auto", so I do not know the size of the background. – Ood Sep 12 '19 at 14:39
  • If my container is 100px x 100px and "background-position" is set to "50% 50%" the conversion would be "50px 50px". Which does not equate to "50% 50%", since it would set the top left corner of the background image to "50px 50px". – Ood Sep 12 '19 at 14:46
  • For the latter problem, with not having the image loaded, can't you just start your animation using onLoad? `` – Rickard Elimää Sep 16 '19 at 08:53
  • Either you know the size of the image OR the value of background size to do the calculation. More detail here: https://stackoverflow.com/a/51734530/8620333 You will find the formula in the section "Relation between pixel and percentage values" – Temani Afif Sep 16 '19 at 09:51

2 Answers2

0

I actually did tried your code and it works... Is this not the accurate sizes? I checked it on different screen sizes and it seems accurate.

Please have a look:

var demoDiv = document.getElementById('divDemo');
var demoCalc = window.getComputedStyle(demoDiv).getPropertyValue('background-position');
var pixelsX = (parseFloat(demoCalc) / 100 * demoDiv.offsetWidth) + 'px';
var pixelsY = (parseFloat(demoCalc) / 100 * demoDiv.offsetHeight) + 'px';
console.log(demoCalc);
console.log(pixelsX);
console.log(pixelsY);
body {height: 100vh; width: 100vw; overflow: hidden}
#divDemo {
  height: 100%; width: 100%;
  background-image: url(https://images.unsplash.com/photo-1554056588-6c35fac03654?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80);
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
<div id="divDemo"></div>

More SO on this subject here

FZs
  • 16,581
  • 13
  • 41
  • 50
A. Meshu
  • 4,053
  • 2
  • 20
  • 34
  • this will always give the same value whataver the image but the values depends on the image size – Temani Afif Sep 16 '19 at 10:17
  • Using Firefox on my desktop with different screen sizes (using the ctrl+m magic) it showed me different results: 480 X 320 showed (232px ,152px) while on 1000 X 800 showed (492px, 392px). – A. Meshu Sep 16 '19 at 10:27
  • I was talking about the image, not the screen size. For one screen size you will always have the same value which is wrong because it should be a different one based on the image ... a 50x50 image will not have the same position as a 500x500 image if we consider pixel value (related: https://stackoverflow.com/a/51734530/8620333) – Temani Afif Sep 16 '19 at 10:29
  • Sorry for my ignorance but when i change the position to: 10% 10% this give me other results. What is this? the container position or the image? – A. Meshu Sep 16 '19 at 10:43
  • 1
    when dealing with percentage values in background-position there is two factors to consider: the image **size** and the container **size**. You need both of them to find the position. Try to use two different images with different **size** and consider the same value of background-position and see how both will be placed differently but your code will give the same result because it doesn't consider the image size. – Temani Afif Sep 16 '19 at 10:47
  • Thanks you for your explanation. Now i finally understood. I leave this here for future readers for now. I think you should answer it since the link doesn't give all of this. – A. Meshu Sep 16 '19 at 11:30
0

If you just need the position of the element, maybe try this:

element.getBoundingClientRect(); (source: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)

You can get the position of each corner as well as dimensions of the element like so: element.getBoundingClientRect().left;

This returns properties: left, top, right, bottom, x, y, width, and height. All in pixels!

Brett Balhen
  • 73
  • 9