Background image that does not display the correct image for the mobile media query for the newsletter

advertisements

I'm adjusting a custom MailChimp newsletter template. I tried to create the jagged edge box using the code for a table with multiple rows, it worked great in the MailChimp preview, but would not display correctly in Outlook or Gmail (i had no idea Gmail does not read z-index CSS code :( ). So I'm resorting to adding an image for each section instead of coding it so it will display correctly on all/most emails(Outlook still doesn't display images either).

The issue that I'm having is that the mobile Media Query image does not seem to work. The desktop image keeps showing up and it ends up cropped. But when I delete the desktop image and test the mobile version with the Media Query code, the correct mobile image shows up. I've been playing around with it trying to see if changing it from a .wideplate to a #wideplate would change anything but it didn't. I'm not sure what I am doing wrong. Here is my code:

<!---------Code for the desktop image------->
#wideplate{
        min-width:100% !important;
        background-image:url(https://gallery.mailchimp.com/ae29537a7dd6b198e989ee849/images/b641b63a-1c1e-4057-95b9-81f660318b88.png);
        background-repeat:no-repeat;
    }

<!---------Code for the mobile image------->
@media only screen and (max-width: 480px){
    #wideplate{
        background-image:url(https://gallery.mailchimp.com/ae29537a7dd6b198e989ee849/images/4287ef24-d799-4ec4-b56b-3cded7c13b1b.png);
        margin-left:0;
        background-size:cover;
    }
}

This is the code that I have for the table that displays the correct desktop image, but it does not recognize the media query for mobile:

<table border="0" cellpadding="18" cellspacing="0" id="wideplate" width="100%">

This is what is being displayed with the code above:

wrong image displayed

This is what tt should look like if it used the media query, and what it looks like when I get rid of the desktop image from an id #wideplate to a class .wideplate:

correct image look


Note- Firstly I want to let you know that background image on many email client is not supportable(mainly in outlook earlier version).

Solution: - Wrong image showing because you are using " background-size: cover;" property of CSS. You should use background-size: contain;" property. you will get the right image. And I will also recommend using background-position: center; property for best practices.