如何使div的高度与图像的高度相匹配而不给div一个固定的高度？

Question

这是我的html标记：

<div class="main">

<div class="background">

</div>

</div>

这是相应的css：

body{margin:0;
padding:0;}

.main{width:100%;
height:auto;}

.background{width:100%;
background:url('../images/bg.jpg') no-repeat 50% 50%;
background-size:cover;
}

显然上面的代码不会在我的.background div上显示任何背景图片。我想要的是，我不想给我的背景div高度，并希望在该div上有背景图片。