I develop in Visual Studio. When I browse my pages, if, for example, a div has a background set using css to be an image which is, effectively, a graduated tint - it appears in bands of colour - i.e. not graduated.
Is there some setting I can change so IE shows background graduated tints properly?
You can use this site to generate your background color. This site is a css gernerator and it generates code for IE 6-7-8-9 and other browsers.
http://www.colorzilla.com/
Related
We need help figuring out how to make the background color of a website section always match the background color of an autoplay video in that section so that you can't notice the edges of the video frame. You can view a preview of our dev theme here: https://qxxl5la95g7ww2x8-8535375951.shopifypreview.com , it's the video of the device floating and rotating on the 4th section.
We are using the same hex code as the video background color, and it works for the screen you are editing it on, but when you view the website on different screens (mac vs pc, desktop vs mobile), the colors don't match. Any solution for this problem would be greatly appreciated!
I'm adding CSS to a Bootstrap-based web app, to match a PDF from a designer. There's a button image, whose background color Seashore reports as rgb(0,186,158) aka hsl(171,100,36%). So I set the background colour of the button to match the image:
background-image: url('images/elements/small-search-button-up.png');
background-color: hsl(171,100%,36%);
Only...it doesn't.
Subtracting 3% from the luminosity fixes it:
I'd love to know why. I can't see any obvious causes in all of the other CSS styles applied. This happens in both Chrome and Firefox, on OS X Snow Leopard.
I'm seeing something similar with certain fonts (comparing the web rendered output with a provided PDF), but that cause could be different.
EDIT
Here's the original image. Hopefully SO doesn't process it.
EDIT2
Why use PNG? That's how the designer provided the images. I wasn't aware that there was a trade-off with color space information. Also, I would have thought that PNGs are better for glyphs needing flat backgrounds and crisp edges (compared to JPEGs), no?
It's most likely the color of the PNG image that is not displayed consistently.
A PNG image doesn't have color space information, instead it has a gamma value, and there is a problem to interpret that value to determine a color space. You will probably see that there is a color difference between different browsers, so if you adjust the color for how one browser displays the PNG, it won't match in other browsers.
Use a different file format if you need the color match other elements, or make the background of the PNG transparent instead of green.
Rendering text is a different matter. There will always be slight differences in how browsers renders different fonts, depending on the rendering method used, which fonts are installed, and system/user settings. You simply can't expect exactly the same result in different browsers.
Google Chrome always seems to be changing the color of an image that I'm trying to match to a background color. I tried saving it in Photoshop and GIMP and even adjusted the color settings in each but it doesn't help in Chrome. FF and IE work fine (for once).
The color of my image is #282828. After I saved it as a PNG, I reopened it in both GIMP and Photoshop and used the eyedropper tool to confirm that the color was still #282828. When it renders in Chrome it's darker. I have a div with a background color of #282828, and the image is right next to it. I took a screen shot and the div's background color was #282828 and the images background color was #1d1d1d. I tried this for several different colors and each has had the same result. I even tried making the source image the color Chrome was rendering it as but Chrome still changes it. So for example, since Chrome was changing #282828 to #1d1d1d, I made the source image #1d1d1d, and when I rendered it in Chrome it was not #1d1d1d, but some other darker color.
At this point, I'm looking for either a fix or a programmatic work-around. Because the image is transparent, has curves, and a drop-shadow, there's really no way for me to avoid replacing the it, or even parts of it, with html.
Update:
I also tried saving it as a jpg and gif. gif actually works but can't preserve the drop shadow. The image I'm using is attached. If I take a screenshot of this in Chrome, GIMP's eyedropper tool says it's #1d1d1d. If I open the original and do the same, it's #282828.
PNG uses gamma correction to try to ensure that the image looks kinda the same across all monitors, and this can cause color mismatches like the one you're seeing. It's a combination of image editor issues and browser issues: image editors are not forced to embed gamma data inside images, and browsers are free to ignore the gamma correction if it's there and free to enforce some at random when it's not there. In this case, I'd rather think that Firefox ignores it.
Use a transparent PNG if you don't want its background to interfere with your page's background.
[EDIT] For your specific case, you may be able to replicate the graphics you're looking for by styling elements, using border-radius and box-shadow, two widely-implemented CSS3 properties that reasonably decay on older browsers.
I am having an issue with Firefox rendering a few of the .png's that I have loaded into a Wordpress blog that I am preparing for a client. The images look fine in IE 8 & 9, and chrome, but it looks very off in Mozilla. I was informed by our other UX guy that Firefox complies with embedded color profiles that may warp the tint of your image. You can view the tint shift by going to :
http://blog.hendrickspower.com
If anybody has any idea of how to over ride the color profile, I'd definitely appreciate the heads up!
Thanks
Here is an image that shows the difference that I am seeing.
alt http://s11.postimage.org/jbnzek4g3/color_embed.jpg
The difference in rendering is due to an ICC color profile embedded in the image. When Firefox finds a color profile it will combine it with the color profile of the display and adjust image rendering accordingly. This will normally make sure that the image is displayed the same on different displays. However, it might also cause undesired effects if the display profile is incorrect.
At least Windows 7 allows you to calibrate display colors. Not sure whether this feature was also present in earlier Windows versions but they definitely allowed selecting a color profile file in the advanced display settings - you could replace the driver-supplied profile by sRGB.
If you absolutely don't want different image display on different computers then you should just remove the color profile from the image with a tool like jStrip and pngcrush.
I have a very strange from when testing a website on Chrome.
The CSS is exactly the same but appears different. Plus tested on the same monitor.
Firefox
Chrome
You can see from the Chrome print screen the background image I am using for the knives/forks, its the background color of this image which changes.
The background image at http://www.cater-shawrecruitment.co.uk/webapp/templates/default/images/bgpage.jpg has an embedded colour profile, which different browsers will interpret differently. You'll need to re-render the image without the embedded colour profile.
This is probably caused by using photoshop to simply 'Save' the JPG, rather than 'Save for web'ing.
Chances are, your image has a color profile applied, and thus is being rendered differently in Chrome and Firefox, which only the former of these two will actually respect it. Reading off of Chris Coiyer's article on web color profiles, you can fix the problem by doing as follows:
If you "Save As..." from the file menu, you will have the opportunity to save your color profile along with the image. If you "Save for Web & Devices..." the "sRGB" (best for the web) color profile will be automatically applied (in CS3 anyway).
this is something to do with colorprofiles.
this might help - Image color differences in different browsers. (Firefox, Chrome, IE)
and this
http://code.google.com/p/chromium/issues/detail?id=143
check your colorprofiles in photoshop (cmd+shift+k) and try to recreate the image. should work.
If you change the image to be png it will be the same color. The reason is in the link of #Nightfirecat and in #graphicdivine 's answer.