Responsive Background Images with Media Queries

Question

Hello,
I'm creating a mobile website in Dreamweaver and would like to use an image which will change with different device widths.  I'm using media queries with background images.  My problem is that in order for the background images to display, I need to assign a height to the div.  When the image is scaled down the height stays static, leaving white space beneath it.  There will be content below the image so the white space will push it down and look wrong.  Is there a way to use multiple images with media queries keeping the height responsive?  Thank you!
@media screen and (max-width: 1024px) {
#mainImage {
          background-image: url(../images/mainImageLarge.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 272px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;
@media only screen and (max-width : 480px) {
#mainImage {
          background-image: url(../images/mainImageMed.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 107px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;
@media only screen and (max-width : 320px) {
          #mainImage img {
          background-image: url(../images/mainImageSmall.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 150px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;

Answer 1

Like this example:
http://alt-web.com/FluidGrid/Fluid-4.html
METHOD:
Insert 2 images -- one for desktops and one for mobile.  Assign classes to each image. 
<img id="banner" class="desktop" src="desktop_image.jgp" />
<img id="banner" class="mobile" src="mobile_image.jpg"/>
In your CSS, use display:none and display:block to show/hide.
.desktop {
    display:block;
.mobile {
    display:none;
/* Special Rules for mobiles */
@media only screen and (max-width: 480px) {
    .desktop {display:none}
    .mobile {display:block}
Feel free to set your break points however you wish.
Nancy O.