CSS - Overwrite image with background-image possible?

CSS - Overwrite image with background-image possible?

Is it possible to somehow overwrite an image with a new image with
background-image?
I wan't to be able to change an image depending if it's retina or not with
css.
Example
HTML:
<img id="foo" src="foo.png">
CSS:
#foo { background: url("bar.png") }