Can a CSS background URL be passed a dynamic query string, and if so, how?

Question

Is it possible to pass the `url` attribute a dynamical query string? E.g `url( ./SOME_IMAGE_GENERATOR?image=1 );` where `image` varies? I need this attribute to be set via JS: ``` $( "#elem" )[ 0 ].style.background = "url( ./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1 )"; ``` The link in the `url` points to a file, that generates and returns an image. The image is generated correctly, but not applied as backround. Clarification The image I want to put inside does not exist yet. It is generated and returned by the page `circuits.php` and depends on the arguments. The background is well changed, if the image exists. I have noticed that unlike changin the `src` attribute of the `img` tag, while the argument creates a request by the browser, sends and recieves headers and info, the `background` does not. I'd thought about sending a request to the `circuit.php` generator, make him save the image on the server and then, with `setTimeout`, change the background, but I cannot rel…

Accepted Answer

Working Example

I've replicated your scenario with a Jsfiddle and a image generating script held on my own website.

As you can see it is indeed possible to change the background dynamically with a generated image: http://jsfiddle.net/DigitalBiscuits/Eh8yY/6/

Debugging your code

So....what's wrong with yours? Well firstly if you're using Firefox or Chrome, use the developer tools to check what's going on. Make sure no Javascript errors are showing up in the console.

Then I would suggest you check that your javascript is actually selecting the element, and that it is able to change the background (lets say to a static image). Isolate the code you that's giving you problems and test it out in a new empty page, kinda like the JSfiddle I've linked you to above.

On a side note, your javascript code looks a bit foreign to me.

Instead of:

```
$( "#elem" )[ 0 ].style.background = ...
```

try using:

```
document.getElementById('myImg').style.background = ...
```

Lastly, ensure that you're setting the correct headers in your php script that generates the images, and that no output is happening before the headers are set.

Can a CSS background URL be passed a dynamic query string, and if so, how?

Solution

Problem