Trouble swapping images for media queries

I’m creating tablet.css and phone.css files.

Everything seems to be working fine, except I can’t figure out how to swap out 4 imgs with 4 smaller imgs. (tried setting max-width and using overflow - images don’t “compress” or cut off well)

HTML5

<aside class=“hide remove”><img src=“img/circles.png” width=“467” height=“293” alt=“Circles graphic”></aside>

CSS

.remove { display: none; }
aside { background-image: url(…/img/circles_tablet.png) no-repeat left top; }

Is this an HTML 5 issue? Or, have I screwed up the CSS?
Is there a better way to do this?
Any help is greatly appreciated.

Tracy