3

I'm designing a page with both a background image and a background color for the area past the end of the (gradient) background image.

Something like:

background: url("/images/bg.png") repeat-x scroll center top #666666;

I can get the background color to match the end of the image in either Firefox or Chrome, but not both. In one of the two the color I set is always darker than the end of the gradient, so a dividing line is clearly visible between the two.

I can't figure out how to select a color that works in both browsers.

Here's an example of a site using this technique successfully:

http://www.thermometerapp.com/

In this case the background color matches the end of the background image in both FF and Chrome (near the end of the page the bg image ends and the bg color fills the bottom portion).

Any ideas how to make this work? Thanks.

Edit: This reminds me of old palette-related problems, but I thought we were past all that now?

4
  • Tried to answer but new users "can't answer for 8 hours" (dumb). Anyway:
    – bgman5
    May 10, 2011 at 23:52
  • 1
    Some more reading finally turned up a similar problem, solved by "Save for Web" in Photoshop. However in this case I'm using GIMP, so the save option for the PNG needed to include "Save gamma." Checking this option and saving solved the problem. The manual describes "Save gamma": Gamma correction is the ability to correct for differences in how computers interpret color values. This saves gamma information in the PNG that reflects the current Gamma factor for your display. Viewers on other computers can then compensate to ensure that the image is not too dark or too bright.
    – bgman5
    May 10, 2011 at 23:52
  • It has been 10 hours since you posted, so you should make your comment answer so you can get credit for it. I can understand the frustration over the 8-hour rule, but that rule is in place for a reason, spam being the biggest one. @Farray: I can't mod comments into an answers, only answers into comments. @bgman5 has to do the actual work. May 11, 2011 at 10:14
  • Umm, I see no problem... (FF4 and Chrome)
    – dkuntz2
    May 12, 2011 at 2:31

6 Answers 6

1

Here's a very simple solution.

When you creat your document, make your gradient fade to transparent. Meaning, you don't pre-define any background color, you only have the gradient. Now, in your css

background: url("/images/bg.png") repeat-x scroll center top #666666;

The, #666666 is where you define WHAT your gradient fades into. This way, it will always be consistent. Plus, this means you can easily change the colors around a bit with just one line of code!

GIF example

The PNG I used

ALTERNATIVE

Or an even MORE fluid solution is using some brand new CSS! Unfortunately it's not "standard" yet and it may be a while until it is, but below I've listed how to do background gradients using ONLY CSS.

body {
background: -moz-linear-gradient(top, #ff00aa, #123000); //Firefox
background: -webkit-gradient(linear, left top, left bottom, from(#ff00aa), to(#123000)); //Chrome
}

Here's a great tool to help you make CSS gradients.

2
  • Thank you, the former is basically what I posted, AFAIK. The latter is another option, but since I'll need to use an image fallback for other browsers anyway I'd rather not duplicate the effort for the small gain in load time.
    – bgman5
    May 11, 2011 at 11:10
  • @bgman5 - There would be no color discrepancies if you use a gradient that fades into transparency versus a color, which is what my post states. Your initial posts makes it sounds as if you have a gradient (which fades into another color) and you want to add a background color behind the image that matches the faded to color in your gradient. -- My post says that you should fade into transparency, not into another color.
    – Hanna
    May 11, 2011 at 23:20
1

You could use a transparent PNG which fades from your color to transparent. This solution has the benefit of allowing you to change your background color (with css) without changing the gradient image.

1
  • Thanks, I solved the problem with the gamma setting I mentioned above. I'll have to experiment with this alternative to see exactly how it works--I assumed it would lead to the same color matching problem.
    – bgman5
    May 11, 2011 at 11:08
1

Not an answer, but reasons why:

  • some image editing apps will color-shift images when doing save-for-web type exporting (Pixelmator, for example, has a nasty habit of color-shifting your PNGs)
  • Some browsers may obey PNG's gamma settings, which could cause discrepancies
  • some browsers will use slightly different algorithms to render HTML colors vs. rendering images
  • ditto for OSes.

The best soltuion, is what Sam suggests...since you are using PNGs anyways, might as well leverage the transparency feature of them.

0
1

Another option is to use a PNG compressor utility like OptiPNG List of options. One of the reasons that those color differences can exist is because some design programs save gamma information into the file. Not all browsers use that info but it does give offsets and off-color results. This option works best if you have textured backgrounds. In the interest of keeping filesizes down I would use a combination of a PNG-compressor and CSS.

Gif could be an option but generally gives a larger filesize than an 8-bit PNG

..If you use solid color gradients as a background I would go the transparent PNG/background-colo0r route as described DA01 andSam

0
1

If you dont mind using CSS gradients, try this: http://www.colorzilla.com/gradient-editor/

the gradient maker is very intuitive (exactly like the one in adobe photoshop) and it generates the code for all gazillion browsers.

There are also some presets that are very good too.

I would go with css gradients because majority of browsers support them and for those browsers which doesn't (cue our favourite little devil - IE) there is a fall back option too.

-1

If your graphics don't involve transparency, you can try using jpg instead of png.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.