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;
  }
}

The code you provided is a little buggy which is probably a good place to start currently you have

#page {
background: url('images/white-zigzag.png') repeat-x;
}

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

The media query portion isn't complete. You still need to provide the CSS selector that you used outside of the query:

#page {
background: url('images/white-zigzag.png') repeat-x;
}

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

Start with that and let me know if that fixes things.