StaticElectricityMan Posted October 26, 2009 Report Share Posted October 26, 2009 Hello, I'm new to the CSS scene and have been trying to figure this out for some time now. I've done a search on these forums and yes, I have googled it but not come across the answer. How do I get a CSS sheet to have two colors as a background? I've seen some sites that look kind of like what I'm looking for, but I can't seem to figure it out. For example, this site here has a look similar to what I am trying to do, but I don't want a margin on the sides of the page: http://www.webvanta.com/ I'm looking for the top of the page to be one color and then the rest of the page to be another color. Am I just missing something? I have a layout penciled out which I can scan, if need be. Go easy please, I am very new at this CSS thing. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted October 26, 2009 Report Share Posted October 26, 2009 You'll just need to create a gradient image, and use that as a background image on your tag. body { background: url(linktofile.jpg) 0 0 repeat-x; } The code above (with the correct link to the background, obviously) gives the tag a background image. It is positioned top left (0, 0) and repeats horizontally across the page (repeat-x). Quote Link to comment Share on other sites More sharing options...
Wickham Posted October 27, 2009 Report Share Posted October 27, 2009 (edited) 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. Edited October 27, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
StaticElectricityMan Posted October 27, 2009 Author Report Share Posted October 27, 2009 Thank you very much, I will give that a whirl...I also need to add an image to the top bar of color, so I will see if I can get that to work too. I must be blind, I didn't even notice that the top "bar" was actually a gradiant image :\ Thanks again! Quote Link to comment Share on other sites More sharing options...
StaticElectricityMan Posted October 27, 2009 Author Report Share Posted October 27, 2009 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; } Quote Link to comment Share on other sites More sharing options...
Wickham Posted October 27, 2009 Report Share Posted October 27, 2009 You have two backgrounds in html, that's not possible; use only one for html and one one for body. Quote Link to comment Share on other sites More sharing options...
StaticElectricityMan Posted October 27, 2009 Author Report Share Posted October 27, 2009 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; } Quote Link to comment Share on other sites More sharing options...
Wickham Posted October 27, 2009 Report Share Posted October 27, 2009 Well, that's a mystery; I've just tested my code to make sure it works. I don't think the doctypes affect the general principle. You should be able to use one background for the html style and then another in the body style which goes on top. What you've got now with background-color: #E7CCA6; in the body style will just cover up all the html background. Quote Link to comment Share on other sites More sharing options...
StaticElectricityMan Posted October 27, 2009 Author Report Share Posted October 27, 2009 (edited) 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? Edited October 27, 2009 by StaticElectricityMan Quote Link to comment Share on other sites More sharing options...
StaticElectricityMan Posted October 28, 2009 Author Report Share Posted October 28, 2009 (edited) Well, I got it to work the way you suggested. I just started it all over again and did it in notepad and it seems to work just fine in Firefox, but the top portion is missing in IE. I have no idea why it didn't before, I must have been missing something. Thanks for your help! Now, its on to the navigation buttons / dropdown menus. Edited October 28, 2009 by StaticElectricityMan Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.