Jump to content

Dual color backgrounds in CSS


Recommended Posts

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.

Link to comment
Share on other sites

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).
Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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;

}

Link to comment
Share on other sites

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;

}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by StaticElectricityMan
Link to comment
Share on other sites

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 by StaticElectricityMan
Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...