Hi,
I am creating an HTML email, but the background image switch is not working in mobile for most of the android devices. I have added the code that I am using.

Is there any way to solve this?

Thank you!

Media querie is,
@media only screen and (max-width: 596px) {
.mob-img{
display: block ;
background-image: url(https://place-hold.it/320x220) !important;
width: 100%!important;
background-repeat: no-repeat!important;
background-size: cover!important;
}
}

HTML code:
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="w-100" style="width: 600px; border-collapse: collapse;">
<tr>
<td width="600" height="220" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; background-image: url('https://place-hold.it/600x220'); background-repeat: no-repeat; background-position: top center; background-size: cover; width: 600px; height: 220px;" class="mob-img">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 320px;">
<v:fill type="tile" src="https://place-hold.it/600x220" color="#ffffff" />
/v:rect
<v:shape id="NameHere" style="position:absolute;width:600px; height: 320px;">
<![endif]-->
<div>
<table height="220" class="w-100" align="center" width="600" cellpadding="0" cellspacing="0" border="0" style="width: 600px; height: 220px;">
<tr>
<td class="left_header" align="center" width="600" style="font-family: Helvetica, Arial, 'sans-serif'; font-size: 26px; line-height: 32px; color:#191919; font-weight: 500; width: 600px; vertical-align: top; padding-top: 30px;">
<strong>Are you ready for your next adventure?</strong>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
/v:shape
<![endif]-->
</td>
</tr>
</table>