Media queries and background images

According to this test:

If you want only the desktop version of the image to be downloaded on the desktop…

and only the mobile image to be downloaded on the mobile device –

You need to use a min-width declaration to specify a minimum browser width for the desktop image…

and a max-width for the mobile image.

So your code would be:

@media (min-width: 601px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x;
  }
}

@media (max-width: 600px) {
  #page {      
     background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}