Question

In my JavaScript I detect images that are on the page, amongst them those that are set as background images via “background-image:url” or “background” shorthand format.

I’d like to get the Image Element associated with that image, so I can check it’s width/height and natural width/height.

Since the browser has already loaded these background images, is there are way to get the Image Element (or similar) associated with the loaded images so I can check the width/height and natural width/height.

Answer 1

You’d have to load the image into an element, and use position: absolute to position it off-screen, in order for it to have dimensions. Once the element is appended to the DOM you can retrieve the dimensions using height() and width().