Change height of <div> to height of background image

[eay]

I have two div's:\[code\]<div class="iphonebackground"> <div class="screenbackground"></div></div>.iphonebackground { background-image:url("../img/iphone-frame.png"); background-repeat: no-repeat; background-position: center; background-size: 100%; height:576px;}.screenbackground { background-image:url("../img/iphone-background.png"); background-repeat: no-repeat; background-position: center; background-size:100%; height:576px;}\[/code\]The first, iphonebackground has background-image set as an image of an iPhone frame (http://chpwn.com/apps/iphone-frame.png). The second, screenbackground has background-image set as PNG image the same size which holds the image of what would be on the iPhone's screen (https://dl.dropbox.com/u/290586/iphone-bg.png. As my site is based on the Twitter Bootstrap the div's resize to fit the browser window so on a smaller display it looks something like this: http://imgur.com/Q2Qy4wn.As you can see, the height of the div is fixed at 576px. This means that in the second image there is a large blank space above and below the background-image. Is there a way to set the height of the divs so that they are as high as the size of the background-image's height, thus removing the blank space?