How does Yahoo create it's background gradient on yahoo.com ?

Question

On Yahoo.com, I really like the light gray body gradient background. (Just the gray fade)

However, I can't find the image they use to great this effect.

Does anyone know what image/code Yahoo uses to create this background effect?

Answer 1

in your image app, make a gradient that starts very slightly darker then it ends

Answer 2

Have a look at the Style on the HTML element using something like FireBug or Chrome's Inspect Element or even IE's Developer stuff.

Answer 3

Also a good thing that a lot of beginners don't understand is that you create a gradient image that's for example 100px tall by only 10px wide. then you just use a css style like this:

body { background: url('backgroundImage/png') repeat-x; }

The repeat-x repeats the image horizontally.

Answer 4

It's the image: http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png

If you look at the CSS you'll see:

background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png);
background-repeat: repeat-x;

Which is what everybody else is pointing out. However, the part that nobody else has pointed out is that there is also:

background-position: 0px -2335px;

Which defines an offset so that the background you see doesn't actually start till way down the image.

The gradient that is shows is white to grey, then transparent. In order to make the gradient in this manner you have to set the color of the page equal to the last extent of the gradient. So if you look in that CSS you'll also see:

background-color: #E8EDF0;

This completes the gradient you currently see on yahoo.com.

I have also confirmed that #E8EDF0 is the correct hex code for the last non-transparent color on that background image.