Getting image width and height of an image being used as a CSS background

Question

i'm building a jquery slideshow carousel for a theatre site, it's being used to display the titles and the associated photos of the 5 most recent shows at the theatre. The shows, and the URLs of the photos that have been uploaded for them, are loaded in from a database, and inserted into the structure below:

<div id="slideshow_outercontainer"> <ul id="carousel">
<!-- This is where the <li>s are generated from the database using the photo's url
as a  CSSbackground image -->
</ul> </div>

And then the associated controls are placed below.

What i need to know is: How can i get the height and width of each image (using php OR jquery), and store it in the script in some way that jquery can get hold of it, and randomise it. What i am trying to achieve is random positioning of the background image, but i need to know how big the image is so that it doesn't position itself in any way that would expose the background of the element.

Also, it would be nice to randomly animate the background image, like some sort of ken burns effect. But i think i know how to achieve that using animate()

Hope someone can help here! Thanks, dan.

Answer 1

You can't do it using just the background image. With that said, you could probably get the background image url, then create a dom element / img tag with that img, position it off the screen to the left, get it's dimensions, and then destroy it.

Answer 2

In PHP, the getimagesize([Filename]) function will give you the height and width of an image. All you have to do is give the function the image's filename and it will return an array with the height, width and image type.

There is an example of it being used here , and the php.net documentation here .