Cambiar tamaño de imagen en móviles de CRM gratuito

Muy buenas a todos, tengo un sitio web informativo sobre CRM Gratuito donde actualmente tengo un banner arriba del todo a la derecha en PC, lo pueden ver en crm-gratuito.com, el 90% del tráfico es de escritorio y se ve perfecto ese banner de 728x90 de Suma CRM, pero lo que quiero es que cuando entre alguien con móvil cambie la imagen a una de 300x250.

He pensado hacerlo utilizando background en CSS, tirando algo así:

<style>

.banner-top { background-url: https://crm-gratuito.com/imagen/suma-crm-728.jpg; width: 728px; height: 90px; }

@media(max-width: 500px) { .banner-top { background-url: https://crm-gratuito.com/imagen/suma-crm-728.jpg; width: 300px; height: 250px; } }

</style>

Pero esto no me funciona, me pueden decir por qué?

Ojalá alguien pueda ayudarme lo antes posible para poder ganar las mejores conversiones de cada visita :)

Gracias de antemano a todos :)