Advertisement


How can I match a site's background color in both Chrome and Firefox?


Question

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?

2011/05/10
1
3
5/10/2011 11:41:00 PM

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.

2011/05/11
1
5/11/2011 12:20:00 AM