Masaüstünde ve mobilde farklı görseli gösterme kodu lazım

Merhabalar. Masaüstünde ve mobilde farklı görseli gösterme kodu lazım. Bu kod olan yazabilir mi? Teşekkürler.

+banada lazım opencart için

<div id="resim">
</div>

 #resim{
background-image: url(../images/masaustu-resim.png);
}

 @media only screen and (max-width: 767px)
{
#resim{
background-image: url(../images/mobil-resim.png);
}
}

hocam buyrun buradan yola çıkarak işleminizi yapabilirsiniz tam nerede kullanacaksınız bilmiyorum.