Reemplazar imagen con otra al achicar pantalla CSS

[juan_salinas_aedo]

Hola a todos, les explico mi problema:

En una web responsive tengo una imagen con un logo muy grande, y necesito que al achicar la pantalla (o en una pantalla de tablet - smartphone) la imagen en cuestión se cambie por otra, esto se puede hacer desde css??

Mi idea es mas o menos así:

@media screen and (max-width: 500px){
.foto_logo{
background:url(logo2.png);
width:100%;
height: auto;
}


Obviamente, este método no funciona, que puedo hacer?

Muchas gracias!!