CSS for site background

[losse]

Hi there
Just wondering if anyone can provide me with the basic CSS to setup a background similar to the following sites:

http://www.bikes.com/main+en+00_100+home.html?zone=1
http://psd2cssonline.com/

In a nutshell... the background consists of a top portion, middle portion and the bottom portion.

What I would like to do is create a top portion, say in "blue" colour, make the bottom "grey" and then the middle portion would be a graphic that blends in the blue and the grey...

Any idea how to accomplish this?

[Sage_of_Fire]

You can't set multiple backgrounds for a single element, but you can set a background image and a background color. I thought that those backgrounds were probably a large image containing the whole top color and the transition combined with a background color of the bottom color. Here's an example:


body {
background: #000000 url(images/graphics/backgroundgraphic.jpg) norepeat top center;
}

or, if you want to set all the attributes individually:


body {
background-color: #000000;
background-image: url(images/graphics/backgroundgraphic.jpg);
background-repeat: norepeat; (not so sure about this one...)
background-position: center top; (you can also use pixel values eg. 10px(x) 20px(y))
}

Hopefully this clears things up.

[losse]

Thanks... Originally that's what I thought but wouldn't that be a super large file to have a background image? I thought it would be split up somehow

[Icy Penguin]

Try making it one pixel wide, then setting it's repeat to repeat-x.

You could also just have three separate divs - and combine each div's background into one image.

So, if you have div#top 150px high, div#middle 500px high, and div#bottom 100px high, your CSS would look like this:



#top { background-position: 0 0; }
#middle { background-position: 0 150px; }
#bottom { background-position: 0 600px; }


#middle's background starts at 150px, and #bottom's background starts at 600px. So your entire image would be 700px high.

[Sage_of_Fire]

The problem with that would be that you'd have to stretch the divs behind the content: no small feat, particularly in some of the older browsers such as IE6. Perhaps you could stretch the header div at the top to fit the browser window and give it the top background color; however, you'd have to limit the width of the things inside the header div to match the width of the content. It all comes down to how you want to accomplish the effect.