Question

I’m generating some thumbnails using a url with querystring parameters, eg:

http://localhost:7229/GenerateImage.ashx?image=/media/map-v2.png&width=320&height=200

and I’m trying to assign this image to the background of an element using jquery:

<div id="myDiv"></div>

<script type="text/javascript">
  $(document).ready(function() {
    $('#myDiv').css("background-image", "http://localhost:7229/GenerateImage.ashx?image=/media/map-v2.png&width=320&height=200");
  });
</script>

However the image isn’t displaying. When I enter the url into my browser window, it does return an image as expected.. but for some reason I can’t assign it as a background image using jquery.

Does anyone have an idea what I’m doing wrong here? Is there a problem using dynamically generated images with css?

Thanks

Answer 1

This should work, you weren’t using the correct background-image syntax:

<script type="text/javascript">
  $(document).ready(function() {
    $('#myDiv').css("background-image", "url(http://localhost:7229/GenerateImage.ashx?image=/media/map-v2.png&width=320&height=200)");
  });
</script>

May I also suggest two other modifications:

1. Your image param in your URL should be URL encoded
2. It’s neater to use $(function(){}) instead of $(document).ready(function(){})

So the following would be the rewrite:

<script type="text/javascript">
  $(function() {
    $('#myDiv').css("background-image", "url(http://localhost:7229/GenerateImage.ashx?image=%2Fmedia%2Fmap-v2.png&width=320&height=200)");
  });
</script>