It's perfectly possible to use both a color and an image as background for an element.
You set the
background-image styles. If the image is smaller than the element, you need to use the
background-position style to place it to the right, and to keep it from repeating and covering the entire background you use the
background-color: green; background-image: url(images/shadow.gif); background-position: right; background-repeat: no-repeat;
Or using the composite style
background: green url(images/shadow.gif) right no-repeat;
If you use the composite style
background to set both separately, only the last one will be used, that's one possible reason why your color is not visible:
background: green; /* will be ignored */ background: url(images/shadow.gif) right no-repeat;
There is no way to specifically limit the background image to cover only part of the element, so you have to make sure that the image is smaller than the element, or that it has any transparent areas, for the background color to be visible.