Microsoft homepage background - How is it done?

Hey guys,

I'm working on setting up a website. I've been trying to create a background much like the background that Microsoft has on their website (http://www.microsoft.com/en/us/default.aspx). I'm just using Microsoft as an example here.

I've got a JPEG gradient. When I initially used it as a background, it obviously repeated itself and I can't have this because I want it to be one continuous background image like, for example, Microsoft has.

I also want it to work in all browser sizes. Any ideas on how I do this and what codes I need?

Any help would be great

Cheers
Nick

 

You use CSS to tell it to only repeat on the X axis (background-repeat: repeat-x - the background itself is only a thin slither as seen: http://i2.microsoft.com/shared/core/1/images/Stage_BG_btm.png

 

Well, better don't ask how microsoft does it, because they completly suck in web standards. There website is actually "W3C//DTD HTML 4.0 Transitional/", and noone with few knowledge about web development uses html 4.0 anymore.. today it's xHTML 1.x with external .css stylesheet.

Anyway, as you said the background image is just a gradient image. If you install firebug plugin for firefox, it shows you that their css for the background is:

.page_bottom_bg {
background-image:url(/shared/core/1/images/Stage_BG_btm.png);
background-position:left bottom;
background-repeat:repeat-x;
position:relative;

}

Code (markup):

They actually use a .png for better compression.. applied to the body of your website i suggest using this code:

 body {
background-image:url(/gradient.png);
background-repeat:repeat-x;
position:fixed;

}

Code (markup):

position:fixed;

makes your background attached to the browser window when you scroll down.