Ben's gradient image will produce a gradual change from one color to the other over the length or width of the image (whichever direction you have chosen to make it).

The site you give a link to has used a huge image 2000*1600px because it has a gradient in two directions, so you can't repeat it in one direction:-
http://www.webvanta.com/img/background_main.jpg

If you want two completely different colors as a background, use two images which are both repeat-x. If you want the color to change 300px down the window, make the first image say 1px*300px and the second say 1px*500px high as a total of 800px height should cover most window resolutions. Then put one as a background on the html style and the other on the body style:-
CSS
html {background: url{blue.jpg) 0 0 repeat-x; }
body { background: url(green.jpg) 0 300px repeat-x; margin: 0; }

where 300px is the vertical position where the image starts. Repeat-x will repeat the 1px width horizontally. Margin: 0; will get rid of the default side , top and bottom margins around the window.

Last edited by Wickham (2009-10-27 01:57:52)

OK...so, interestingly enough...I can get the top color to show up in Firefox, but not the bottom color.  When I switch rendering engines over to IE, I get the bottom color but not the top color.  I also can't seem to add another image to the top layer, there seems to be some kind of overriding rule thing going on.

html {
   
    background: url('backgroundtop.jpg') 0 0 repeat-x;

    background: url('CAAlogo.jpg') 0 0 no-repeat;
       
}

body {
   
    background: url('backgroundbottom.jpg') 0 300px repeat-x; margin: 0;
   
    font-family: "Arial Narrow";
    font-size: 14px;
    color: #333333;
    }

Yes, I've removed the two backgrounds...I was trying to find a way to put an image up there with the background (kind of like the nice frog on this site with the green bar...except I would want the green bar to be about 300px high and run from left to right and not centered at all).

I've been fiddling with some DOCTYPEs at the top of the code to try to get it to show up equally in firefox and IE, but the only way I can get both colors to work is to not put up any DOCTYPE and then it only works in IE for some reason.  I also had to just use a default background-color for the body:

html {
   
    background: url('backgroundtop.jpg') 0 0 repeat-x;   
   
}

body {
    background-color: #E7CCA6;
    font-family: "Arial Narrow";
    font-size: 14px;
    color: #E7CCA6;
}

Yeah, for some reason using the images for both makes it so FF only shows the top image while IE only shows the bottom image.  I'm updating my browser to see if that's the reason why its all wonky.

However, if someone else is running an older version of FF or IE, I wouldn't want that to be an issue.  I may just have to simplify if I can't get this to work I guess.  Is there a way to insert 2 images in the "top bar" while making the bottom portion a background color?  The reason for that is that I'd like to have a continuous bar (thus the repeat-x) of one color for whatever browser display is out there while also having the company logo in the upper left (the CAAlogo.jpg 0 0 no-repeat;).

Maybe I'm looking at implementing the design wrong?

Last edited by StaticElectricityMan (2009-10-27 18:12:01)