Overlay background image onto background color
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 ide开发者_开发问答as?
Thanks in advance!
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;
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;
}
精彩评论