Question

Can anyone suggest how I could do this:
Using an image variable I want to set the background of a div, although not using the image’s source/url. For example, this doesn’t work:

var img = new Image();
img.onload = function() {
   $('#div').css("background-image", img);
}
img.src = "http://example.com/image.jpg";

Basically, I’m trying to set the width/height of the background image so it fits the div nicely. I figured using an image variable was the only way, but if it isn’t, please suggest how I can do it. Thanks for the help! 🙂

Answer 1

What you could do is create an absolutely positioned img and then using the image attributes set the width and height. By absolutely positioning it you can have it displayed behind other content.

Give it a try and if you are having trouble with it, provide a code snippet and I can assist you in getting the html and css correct.