Hello. I want to replace my websites logo with a different image on tablets/mobile. I can figure out how to hide it using this code:


Code:
@media (max-width: 730px) { 
	#logo {display: none;}	
}
I am just wondering what I could do to replace the logo with a different image around that same pixel width. I have tried this no to no avail:

Code:
@media (max-width: 730px) { 
	#logo {background-image: url("image url");}	
}