I have a problem with my website background. In Firefox and other browsers the background is much whiter and brighter than in Chrome
This is the code for my background :
body {background:#ffffff url(../../images/background.jpg); direction:rtl; }
http://i.stack.imgur.com/inK3d.png
http://i.stack.imgur.com/KiqT4.png
One explanation for this may be that the JPEG image has an embedded color profile that the browsers are interpreting differently. To keep the colors uniform across browsers, the images should be exported with the sRGB color space.
If you're using Photoshop for instance, if you use the "Save for Web & Devices" option, it will automatically convert the image to the sRGB color space. Instructions for changing export color space will change depending on what image editor you are using, of course.
For more information on how color profiles can affect the way colors are displayed on the web, please see this css-tricks article.
Related
I have a link to a pdf file pdf-link
The background colors display correctly in firefox but not in chrome. Is there a way to fix this?
All pdf viewers should render the default range from white background to black text It is possible in PDF viewers to change that range by filtering but most will default to keep RRGGBB static from 000000 to FFFFFF, there can be small differences in tone shades but not usually noticeable by eye (often requires screen capture of rendered colour to spot any slight shade difference). Acrobat can have the greatest range of enhancements for Accessibility, altering different objects colour. But thats exceptional for browsers unless there are plugin enhancements.
Anyway here Firefox is top left, and Chrome is lower Left, without a noticeable difference.
I have a logo with a blue background, I've picked the colour via Chrome inspector (matches Firefox colour picker as well), yet on mobile the logo stands out on the background.
What's going on/how can I prevent this?
Why you see another color on another display?
That logo has at least 5 colors in the background. That's the reason you can not match it.
Your monitor and mobile displays are not accurate, and it seems your contrast and brightness of the screen are not correct. In the professional photography and video editing, they call it color blind.
That's the reason professional designers do not use consumer monitors.
If you are a designer you need to have color accurate monitor and you need to calibrate it.
If you want to keep working on the current monitor at least change your monitor brightness, contrast and color settings, close to the natural settings.
What is the software solution?
Get the logo in SVG, PSD or PNG file from the designer. SVG files are better because they are vector files that you can open it with free software like Inkscape. Change whatever you like and export it to the PNG.
If your logo is a text like what you have here, Search font by image and recreate it with Inkscape. The logo you mentioned here seems to be two fonts. Clinica Pro and Sixta. and both of them are not free font.
You can remove the background using Gimp, Layer > Color to Transparency > Color to Alpha, and select background color.
Useful links:
Changing Background Color
Making the background of an image transparent in Gimp
Anyway, I did remove the background from that logo for you (Transparent Background):
It's possible to embed pdf files, but I would like to customize it a little bit more.
For example, look at this jsfiddle, with the following code:
<object data='https://dl.dropboxusercontent.com/u/58922976/test.pdf#view=FitH&scrollbar=0&toolbar=0&statusbar=0&messages=0&navpanes=0'
type='application/pdf'
width='72%'
height='100px'>
<p>It appears your Web browser is not configured to display PDF files.
No worries, just <a href='https://dl.dropboxusercontent.com/u/58922976/test.pdf'>click here to download the PDF file.</a></p>
</object>
<object data="http://tinyurl.com/punrrgs" width="72%"> </object>
I would like to be able to get the exact same result for the pdf as I have with the svg. They both look very similar now (in chrome), the only difference is this grey/brown background of the pdf reader. Is it possible to hide this background ? Or maybe set this background to white so you can't notice it ?
Edit: I was thinking that using a white border and negative padding this could have worked, sadly negative paddings are not allowed. Any other creative way to get a white border in the place the grey adobe reader border is now located.
You can switch plugin into FullScreenMode(Ctrl + L) and change Full Screen Appearance (it will work on a client side only, you can't do it via parameters link)
Background Color Specifies the window’s background color in Full
Screen mode. You can select a color from the color palette to
customize the background color.
I have an image that is sitting on top of a background. In Firefox and Chrome it looks fine as per below:
But in Internet Explorer (any version), it looks like the image background is a different shade than the background (I have put a red box to highlight where the image ends and the background begins, but it's pretty obvious).
How could it be that, given the same image and the same HTML background color, one browser looks fine but in Internet Explorer it looks like the colors are off as the background color of the image is a shade lighter than the HTML background?
The full website is here if that helps.
I think you have different image formats, and Internet Explorer got some image rendering problems. Try to put both of the images background and logo (back-page1.png, logo5.gif) in the same format either GIF or PNG (I prefer PNG) and it should do the trick!
Good luck :)
UPDATE:
So what is this render issue?
As tenfour said in comment, "assuming that the RGB color is really the same on both images, the underlying problem is that Photoshop saves gamma information in the PNG which causes Internet Explorer to render a different color than desired".
I think you need to remove the gamma information in the PNG. See http://morris-photographics.com/photoshop/articles/png-gamma.html for an explanation of this problem. I use http://www.choppng.com/ to remove this section from the PNG.
On this page, the <body> element has a background color of #77BFBC. The image (rv-banner.jpg) set as the background of the <header> element also has a background color of #77BFBC.
On windows (either FF or IE), the two colors blend perfectly. However on FF on the Mac, there is a noticeable difference between the background color of the image and that of the <body> element. How can I fix this?
Thanks,
Don
With the release of Firefox 3.5, colour-correction was turned on by default, but its effect depends on your system profile:
http://hacks.mozilla.org/2009/06/color-correction/
In practice, this means images saved with colour profiles are corrected and could show up mismatched to CSS colours.
It's possible to turn off colour-correction in Firefox, which fixes the problem for you, but that still leaves all the other potential visitors out there. Seems like removing the colour profile from the image is the way to go. There is a GIMP plugin that does this, see here for a discussion.
When images are displayed, they are converted from their color space to the color space of the screen.
To make your JPEG images display with the same color conversion as the rest of the elements, you should convert the images to the sRGB color space before saving them.
Browsers that doesn't support color profile information in images always uses the sRGB color space, so if you use sRGB for the images the color profile gets correct even for those browsers.
If there is no color profile in an image file, the sRGB color space is assumed. This means that you can save your images without a color profile to minimise the file size.
Try to save image as png not jpg. And if you are using photoshop, then choose "save for web and devices" not "save as".
This isn't due to your code but color profiles, I don't know if you can change this.