Css Help!

Hi!

I've a image of 778px width and 600px height. The left side of the image is red color and the right side of image is green color. The image is centered in the middle of the page with following code in css:

body
{
  margin: 0px;
  padding: 0px;
}

div.fruitful
{
  background-image: url(/images/fruitful.jpg);
  background-repeat: no-repeat;
  margin: 0px auto;
  padding: 0px;
  width: 778px;
  height: 600px;
}

Code (markup):

Code in html

<div class="fruitful"></div>

Code (markup):

I wanted to add background color to the page with left background color red and right background color green. So that whenever the page is viewed in higher resolution the background color of both the sides matches with the sides of image color.

Here, I have used image as background in css. In this case do I have to use background image rather than background color to get red and green color?

 

Make a picture of what you want. Hell, do it in paint.

My first thought tho is that if you merely want two background colours then you'd want background-color on two elements instead of making a browser load an extra image. But I can't see what you mean because you've said the image (or the div???) already have this red-green background?

 

Thanks for the reply. I did it just now with lots of test. I uploaded it at Apeee Hosting

It is in CSS and XHTML. Please let know how did you like? Suggestions appreciated.