How to display CSS backgroundImage when the source redirects?

Question

I'm attempting to dynamically set the backgroundImage for a div where the image source url is not the true/final destination url but instead returns a 301 redirect pointing to the actual image url. Using this redirecting url in a standard < img src=" ... tag works normally as the browser transparently follows the redirect. However, it apparently does not do the same for backgroundImage.
My only thought at the moment is to use XMLHttpRequest to perform a HEAD request, determine the actual URL from the headers returned and use that as the backgroundImage, but this obviously involves significant overhead. Can anyone offer a better alternative?

Answer 1

Have a script build the image dynamically based on session or cookie data. I do it all the time.

Answer 2

Have your current script that is returning the 301 download/generate the image itself, or use URL rewriting to do the redirect at the server side.

Answer 3

If it's a small background image you might consider encoding it in BASE64.

body {
  background-image:url(data:image/png;base64,<base64 STRING>");
}