Hey all,

Just wondering on how sites like http://www.track-ip.com/ they can have their background progressively get lighter or darker as you scroll on the page.

Thanks!

The site you linked to is using an image. The image is the gradient you see, but only 20px wide. The image set as a background image on the body and repeated horizontally.

I believe css3 has support for creating gradients, but for now and the near future we'll be using images for things like this.

they use a graduated background image.

RC the page, select "Show background image"

So there's no way to replicate that using css code?

You can use css3 like I mentioned above, but it won't work in IE yet. If you want the gradient in IE then you're going to use an image or javascript. The image will be much easier.

Here's how you could do it in code for webkit browsers (Safari, Chrome). Mozilla browsers should be similar except you'll use -moz in front instead of -webkit.

Originally Posted by vangogh

You can use css3 like I mentioned above, but it won't work in IE yet. If you want the gradient in IE then you're going to use an image or javascript. The image will be much easier.

Here's how you could do it in code for webkit browsers (Safari, Chrome). Mozilla browsers should be similar except you'll use -moz in front instead of -webkit.

Thanks for the link, although it's very confusing for me.

Also, is there anyway to make a nav bar like that without Photoshop?

You mean the navigation that is all in HTML, CSS and text with just one very small background image? (which isn't actually necessary).

And BTW there are far more image editors than Adobe Photo Shop.

Yes, I guess how would I recreate a similar nav bar?

you could use a floated list, or floated divs in a container with a background colour.

or simply set the <a>nchor elements to display:block and float them in a container

A very quick example -> http://www.modtalk.co.uk/_site/demos/menu/horizontal/