Background gradient stops after 1216 pixels

[Keith Hughitt]

Solution:

1. Extend gradient (-> 1600px?), and have bottom end approach black
2. Set bg color to black

[Keith Hughitt (keith-hughitt)]

Note: Another possibility is to create texture on a plain white background and then add gradient on top using CSS3 gradients (is it possible to combine background images and gradients?)

[Keith Hughitt (keith-hughitt)]

After a little more research, it looks like it is possible in CSS3 (e.g. Firefox 3.6 or higher) to have specify multiple backgrounds, and to mix gradients with background images this way. Since the feature is very new however, it is probably better to take a simpler approach (e.g. create a longer image or one that ends in a solid color) until support for gradients and multiple background images is more widespread.

[Keith Hughitt (keith-hughitt)]

Created a better transition between the background image and the background color. Should be good for now. Once the browsers have caught up a bit and support for CSS gradients/RGBA has improved, a better solution is to use an HSV noise image (e.g. noise 1-4.png in resources/images/backgrounds), along with a semi-transparent gradient:

-moz-linear-gradient(center top , rgba(232, 244, 248, 0.8), rgba(56, 60, 70, 0.8)) repeat scroll 0 0%, url("../../resources/images/backgrounds/noise4.png") repeat scroll 0 0 transparent

See also: http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients

For more fun, consider adding modifying the gradient RGB values slightly based on layers in viewport (e.g. add orange tinge to gradient when AIA 304 is displayed).