关于background-image的一些使用心德和疑问！

最近做了一个html5的简易版植物大战僵尸，由于需要炫丽的背景，所以，在几经思考之后，还是选择了使用background-image这个属性，

但是background-image有一个弊端，就是在给一个块级元素（测试表明貌似只能是块级元素）指定了背景图片之后，会出现有多少内容显示多少背景的情况，

因此，笔者就想到了用如下方法解决：

var img = new Image();

img.src =  背景图片；    //当然，此处用到的图片都是在预加载里面加载好了的

然后手动将块级元素的宽和高设定为img.width和img.heigth；

这样之后，几乎就OK了，但是，笔者偶然想到，既然图片已经加载好了，再次使用var img = new Image()，这个语句是不是会有一些浪费，

于是，笔者尝试着把img保存为全局变量，然后只new Image()一次，在任何需要指定块级元素为背景大小的时候，直接用

img.src = 背景图片；

再手动修改；

这样修改之后，在一段短时间内，几乎没有了问题，但是偶然一天，

笔者遇到了在img.src = 某图片；之后，使用img.width和img.height依旧显示的之前如是指定的一张图片的宽和高；

当然，笔者保证所有用到的图片都是预先加载好了的！

即

img.src = 图片1；

/*若干代码*/

img.src = 图片2;

alert(img.width + " " + img.height);     //此处显示的居然是图片1的宽和高

 

经过测试，在错误语句之前加上img = new Image()；就OK了！

并且，经过多次调试，发现，有的图片会这样，然而有的图片又不会这样，彻底晕了！

在此，留下这个操作背景图片的方法，也留下这个疑问！

 

望大家参考以及指正，笔者说错了请指正，但希望言辞不要太犀利了，感谢！

 

短短几十年的路途，到底是为了什么？