0

Is there a way to find ABSOLUTE backgroundSize of a background image in an element.

The CSS3 property can return values in terms of auto/ percentage etc. However i want to find out the absolute values (say 200px, 100px)

I know one way where we can load the background-image using load() function in a hidden img element, and then finding its height and width using browser functions or jquery...

But that will be slow as it load image again, is there a way to find the size from already rendered background image element

hjindal
  • 588
  • 7
  • 16
  • 1
    *"But that will be slow as it load image again"* No, when you've loaded the image once you won't load it again. so a js solution is fine – Fabrizio Calderan Apr 17 '12 at 10:10
  • @Calderan: Does your statement rely on browser caching? then it is not always true... like i tried this in IE and verified that the browser makes calls to the server many times (not always though...) That's why i was looking for something reliable and having not significant performance impact... – hjindal Apr 19 '12 at 04:32

1 Answers1

0

The value of the CSS3 background-size property is just that, the value of the style property (how the image should be displayed) and says nothing about the size of the actual image referenced by the background-image URL. You must load the image (which hopefully will come out of the browser cache, but you can't be sure) if you want to know for sure. The background image itself is not part of the document DOM.

Old Pro
  • 24,624
  • 7
  • 58
  • 106
  • yes loading image and finding dimensions is the last resort as i mentioned in the question... i was just wondering i haven't missed any better option... – hjindal Apr 24 '12 at 16:09
  • @hjindal I understand. I was trying to assure you that you have not missed a better option. – Old Pro Apr 24 '12 at 16:11