JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zurb-ink/1.0.5/ink.css">
<div class="fix">
<table class="container twelve header image-bkg">
    <tbody>
        <tr>
            <td width="580" height="200">
            </td>
            <td class="expander"></td>
        </tr>
         <tr>
             <td>
                 <div class="background eleven"></div>
             </td>
             <td class="expander"></td>
         </tr>
    </tbody>
</table>
</div>

CSS

.background {
    background-color: red;
    width: 530px;
    height: 500px;
    margin:auto;
}

.image-bkg {
    background-image: url('http://placehold.it/630x300&text=Non-Retina%20Image');
    background-repeat:no-repeat;}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
.image-bkg {
    background-image: url('http://placehold.it/1160x600&text=Retina%20Image');
    background-repeat:no-repeat;
    background-size:100%;}
}