Reputation: 33

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

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?

Upvotes: 3

Answers (5)

Tushar

Reputation: 1176

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;
}

Upvotes: 0

McAden

Reputation: 13972

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.

Upvotes: 3

Catfish

Reputation: 19294

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: