How does Yahoo create a background gradient on yahoo.com?

Question

At Yahoo.com, I really like the light gray gradient background. (Only gray fading)

However, I cannot find the image that they use to achieve this effect.

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

Answer 1

This image is: http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png

If you look at CSS, you will see:

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

This is what everyone else points out. However, the part that no one has yet indicated is that there is also:

background-position: 0px -2335px;

, , , .

, , , . , , . , CSS, :

background-color: #E8EDF0;

, yahoo.com.

, # E8EDF0 .

Answer 2

, , ,

Answer 3

HTML, - FireBug Chrome Inspect Element IE Developer.

Answer 4

It is also good that many beginners do not understand, so that you create a gradient image, which, for example, 100px, has a width of only 10 pixels. then you just use the css style like this:

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

Repeat-x repeats the image horizontally.

Answer 5

The current yahoo background has the following CSS property

body{
background: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20110124.png) left -2335px repeat-x; /*unsupported fallback*/
background: -moz-linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Firefox*/
background: linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Standard*/
background-color: #dce2e7;
background-attachment: scroll;
}