Overlay background image onto background color

Question

Hi!

My website (http://www.webbuddies.co.za) works perfectly, but when viewed at 1280x1024 resolution, there's a bit of white visible at the bottom of the page that I'd like to get rid of. The background is a gradient image and rather than recreating the image, I want to just change the color of the background to match the bottom of the gradient. Can this be done?

Here's my CSS:

body {
    background: transparent url("Images/Background.png") repeat-x;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

If I change transparent to a color, the image disappears... any ideas?

Thanks in advance!

Answer 1

You can just use the background-color attribute in your CSS, setting the color to the bottom color of your image. For example:

background-color:#00ff00;

Answer 2

simply set an additional background-color like this:

  body {
    background-image:url("Images/Background.png");
    background-repeat:repeat-x;
    background-color:#999999; /* << inset your gray here */
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }