Transparent background darker on an ipad

HTML & CSS
1

Hello

I have a transparent background image overlaying on top of other elements on a site I’m developing at the moment. I’ve checked it on my screens and resolutions and it’s significantly darker on my ipad.

background-image:url(…/images/trans.png);
background-repeat:repeat;
background-color:transparent;

the image is a one pixel image of #F2EEED and was set with an opacity of 85% before it was turned into a png.

Is there anything obvious that I should do for ipad? I’ve never encountered this problem before. I compressed the png via illustrator biut can’t see how this would make any difference.

In case you were wondering I was avoiding using opacity:0.85; and filter:alpha (opacity=85); as I need to overlay more elements on top at a full opacity without having to deal with overwriting the cascading.

I’ve checked the output on my ipad using firebug lite and it’s outputting the same code

any help would be greatly appreciated

regards

rebekah

2

Hello :slight_smile:

I think it’s all down to the screen settings across various platforms. When im testing my projects, i notice that backgrounds are noticeably darker on the mac, then on the windows computer.

3

Color fidelity is a very sticky issue, even in print design. While the true variance lies in the user setting , Macs and PCs have been noted to have very different GAMMA settings. Unless you limmit your palette, chances are that trying to correct one will impinge on the other. I got an ARNOVA 10G2 tablet and was surprised to see how much DARKER android seemed… and then there was the viewing angle issue. As long as your SPECTRUM moves in unison, no one will really notice (unless they some how run the devices side by side).

4

Hi

what I’m noticing is a very very marked difference between safri on my mac and safai on my ipad. it looks like a completely different colour.

5

Also all the other colours of bgs seem to be fairly regular between each platform so it’s only affecting the transparent background image.

6

It may be the png gamma problem and you could try running the image through pngcrush to remove the extra information. I never save images using photoshop as the colours are always different but Fireworks on the other hand seems to produce consistent results.

Do you have a link we could look at and see if we get the same results?

7

I can’t i’m afraid as it’s a client’s private work but i’ll supply images

8

here are images of a section that demonstrate the problem. Admittedly the ipad one is taken on a phone camera but you can see the discrepancy especially when the transparent image is overlaid on the white background, it’s a significant difference. I also designed this site and my client will notice the discrepancy so I need to find a solution

9

Thanks for all your help and for the link as it made me think about how I compressed it and i compressed it without adding the convert to sRGB option and it’s all come out pretty much the same now

thanks for the help :slight_smile:

10

Glad it helped :slight_smile: