You could always try taking the background image and adding it to the container as a regular image instead (positioned and scaled accordingly):
- $(function(){
$('#container *').css({'background':'transparent','zIndex':2,'position':'relative'});
$('#container').css({'overflow':'hidden','position':'relative'});
var containerWidth = $('#container').innerWidth();
var bgimgurl = $('#container').css('backgroundImage').replace(/url\(|\)|"|'/g,"");
var img = $('<img src="'+bgimgurl+'" width="100%" />').css({'position':'absolute','left':0,'top':0,'zIndex':1});
$('#container').css({'background':'transparent'}).append(img);
});
I had to do a few things to get this to work in firefox and would probably need to do some more for it to work in IE, but these are all CSS related. The basic principle is the extraction of an image URL from the backgroundImage property of the element, and the insertion of an image tag into that element to 'replace' it. The image inserted needs to have absolute positioning for this (so the container must have relative positioning), and the container has overflow hidden so the image behaves like a regular background. I have also applied relative positioning, transparent backgrounds, and a z-index to all child elements of the container to make this work, but this is a little heavy-handed - if the container div had another container div nested inside it you could apply the style to just this one element.
