jQuery: Load background image from css class into variable?

Answer 1

One way you could do it is to just ask jQuery what the background image is. If you don't have any elements with class myCssClass perhaps just generate one and don't add it to the DOM.

var checkeredGraphic = $('<div class="myCssClass"></div>').css("backgroundImage");

I haven't tested that, but if it doesn't work, perhaps add it to the body with a large negative margin so it doesn't render on screen.

That line above will return url(/images/checkered.gif) so then you could just use a regex to clean it up:

...css("backgroundImage").replace(/url\(['"]?([^\)'"]+)['"]?\)/, "$1")

Also, your css definition is wrong. It should be:

background-image: url(...);
background-repeat: no-repeat;

Answer 2

You can access CSS properties from JavaScript pretty easily. Check this out for an in depth explaination: http://www.hunlock.com/blogs/Totally%5FPwn%5FCSS%5Fwith%5FJavascript