I have a GIF picture with transparency. When I place the picture in a regular HTML the transparency shows fine. But when I load the same picture as a logo in a PHP software, the picture doesn't show the transparency but a white background.
The only strange thing I find in the page on which I load the picture which doesn't show the transparency, it has a gradient color background in CSS. I don't know if it's related to the problem or not.
What reason could there be that the GIF shows the transparency in some pages and in other pages it doesn't? Whatever the reason is, what can I do to make it work where I need it?
what can I do to make it work where I need it?
I would use a .png instead a .gif as logo you will probably load it through css
(background: url(path/.png) no-repeat; , I know it does not answer the why but solves the issue for sure.
If a .png is too big in your opinion use the online great tool it uses even advanced lossy compression for PNG images and preserves full alpha transparency
Related
I have svg image with transparent background (from inkscape, I have checked its transparency, I am 100% sure its transparent). When I add it to the website using , it automatically adds a white background, so it is no longer transparent. Does anyone know why?
Try opening the SVG file in Figma, if a white background appears remove it from the rest of the parts and save this edited one. Works all the time!
I have web App where a video is being played, the video and the web page have being set to the same background color however the video background appears different on different machines same browser. What I want to achieve is to have a video of a spinning triangle on a grey background color similar to the web page background color.This what I get on different machines instead from hp Probook 445 G7 from hp elitbook 8470. The images are from the same web App but the firsr image has a darker video background unlike the second one. What could be the cause and how to fix it.
Thanks
I've tried to solve a similar issue without success.
Went as far as saving out a transparent background in video which did not turn out to be a viable solution.
My thought is the white balance on your computers change the light gray/white color values slightly.
I've also noticed the exact same hex or color values exporting slightly different in video than with svg or png backgrounds. I've battled that by using a gradient of a background to soften the edges so it appears seamless.
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.
I have a website where the background has a light gradient (light gray from top to white on the bottom). When I place an image with a transparent background on the website, the background of the image picks the top color of the gradient. So instead of the image's background appearing to be a gradient as well and blending in with the site, the image's background color is just light gray.
I'm not sure if this is the way it's suppose to be (due to the way transparency works on websites). But I was wondering if anyone could provide a workaround
First of all welcome to StackOverflow :)
It depends. First of all, your website will be rendered differently on different browsers, and that's of vital importance to you, because unless you test it on different browsers, you can't be sure what some users will see.
If you've seen a partially transparent PNG that instead of transparency shows a grey background, chances are you're using Internet Explorer 6, a very old browser that you really shouldn't use. It's the one with the blue E, that E stands for Evil. Run.
On a more serious note, having a link to check would help, or a screenshot, because it's hard to tell just by guessing. PNGs should render fine against any background.