.test2 {
    background-image:url('images/verylargeimage.png');
}

// If on a smaller screen...
@media all and (max-width: 600px) {
    .test2 {
      background-image:url('images/smallimage.png');
    }
}

.test2 {
     background-image:url('images/smallimage.png');
}

// If on a larger screen
@media all and (min-width: 600px) {
    .test2 {
        background-image:url('images/verylargeimage.png');
    }
}

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />