: How can I match a site's background color in both Chrome and Firefox? I'm designing a page with both a background image and a background color for the area past the end of the (gradient)

@Margaret771

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

Vote Up Vote Down

@Tiffany317

If you dont mind using CSS gradients, try this: 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.

Vote Up Vote Down

@Samaraweera207

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

Vote Up Vote Down

@Holmes874

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.

Vote Up Vote Down

@Bryan765

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.

Vote Up Vote Down

@Reiling762

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.

Vote Up Vote Down