Providing the color on top of the background image

I have a page having the background image using:

background:url('gir.gif') scroll no-repeat 0 0 #foo;

I want to provide color on the top of the image, such that the image is lo开发者_如何转开发oking like behind the color.

---

@bashu; it's a better to use rgba color transparency because it's not transparent you content at all.

background: rgba(0,0,0,0.3) 

for IE

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";

you can create your rgba filter for IE for here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

check this for more Opacity of div's background without affecting contained element in IE 8?

---

The div with the background image should be separated from the div that holds your content and the background color.

The div with the content and background color should span the entire other div and have an opacity, or you can create a 1x1 transparant gif/png of the color instead.

Here is a jsfiddle example:

http://jsfiddle.net/AZk6c/

I would recommend using a transparant image as color instead so the text doesn't become transparant with the rest of the div. (unless there is no text in that div of course)