JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    I'm 64x64px in size and my feathers look a bit beaten especially if you zoom in with ctrl+scroll
</p>
<p>   
<img id="img64" src="http://maccyd10.hostoi.com/tweet64.png"/>
    </p>

<p>
   I'm 256x256px in size but my container has been set to 64x64px and I look much healthier 
</p>
<p>
<img id="img256" src="http://maccyd10.hostoi.com/tweet256.png"/>
    </p>
<p>
   I'm 256x256px in size but my container has been set to 64x64px and I don't fit iside it :( 
</p>
<div id="div256"></div>
    <p>
   I'm almost happy but I dont think I'm very cross browser compliant, can you help me?
</p>
<div id="div256b"></div>

CSS

#img256{
    width:64px;
    height:64px
}

#div256{
    background:url("http://maccyd10.hostoi.com/tweet256.png") no-repeat scroll -100px -40px;
    width:64px;
    height:64px;
}

#div256b{
    background:url("http://maccyd10.hostoi.com/tweet256.png") no-repeat;
    width:64px;
    height:64px;
    background-size:64px 64px
}