How to define a 400 by 200 px sprite image with a 800 by 400 px retina display version

gistfile1.css

.ui
{
  background-image: url(sprite.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .ui
  {
    background-image: url(sprite2x.png);
    background-size: 400px 200px;
  }
}