 <p>I think the issue is about images color profiling which can lead to different rendering on different browsers.</p> <p>You can read more about it here: <a href="https://css-tricks.com/color-rendering-difference-firefox-vs-safari/" rel="nofollow">https://css-tricks.com/color-rendering-difference-firefox-vs-safari/</a></p> <p><strong>EDIT:</strong></p> <p>Your img has a <em>RGB</em> profile. So I converted it to <em>sRGB</em> which is the recommended color profile for the web.</p> <p>OUTPUT:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.bg{ background:#DE9964; width:332px; height:91px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://i68.tinypic.com/29bld6r.png"&gt; &lt;div class="bg"&gt;&lt;/div&gt;</code></pre> </div> </div> </p> <p>Now it should look the same both on Chrome and Safari. </p> <p>Tested on Mac OS X - Chrome 48.0 and Safari 9.0.3</p>