CODEWITHSUNDEEP
css
Dionysis
Dionysis

Reputation: 824

CSS background color and png color inconsistent between browsers

I am using a png image as background for a single page website. I want the background of the png to match the background of the page as I scroll down so that it looks continuous. I've set the background-color value to #EC966A. On my mac it shows correctly in Firefox and Chrome but not on Safari.

The transition in Firefox and Chrome:

Firefox and Chrome

The transition in Safari:

Safari

I had someone test it on Windows and it shows wrong on Chrome and Firefox as well.

Here is the code:

<!DOCTYPE html> 
<HTML>
  <BODY>
    <P>This is the image:</P> 
    <img src="https://i.sstatic.net/bpYQq.png" alt="">
    <p>and this is the background</p>
    <div class="bg" style="background-color: #EC966A; width: 335px; height: 100px;"></div>
  </BODY>
</HTML>

Upvotes: 1

Views: 2209

Answers (1)

fbid
fbid

Reputation: 1570

I think the issue is about images color profiling which can lead to different rendering on different browsers.

You can read more about it here: https://css-tricks.com/color-rendering-difference-firefox-vs-safari/

EDIT:

Your img has a RGB profile. So I converted it to sRGB which is the recommended color profile for the web.

OUTPUT:

.bg{
  background:#DE9964;
  width:332px;
  height:91px;
}
<img src="http://i68.tinypic.com/29bld6r.png">
<div class="bg"></div>

Now it should look the same both on Chrome and Safari.

Tested on Mac OS X - Chrome 48.0 and Safari 9.0.3

Upvotes: 1

Related Questions